I’ve created an animation effect in CSS and it works fine on texts. I want to use it on a PNG image I have used as an icon, as well, but it doesn’t work.
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo:hover {
animation: moveInRight 1.5s ease-out;
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="logo-box">
<img class="logo" src="img/logo-white.png">
</div>
Instead of selecting the hovered .logo itself (which moves its position), target the wrapper that doesn’t move (.logo-box), then target the .logo for animation. Instead of
.logo:hover {
animation: moveInRight 1.5s ease-out;
}
use
.logo-box:hover .logo {
animation: moveInRight 1.5s ease-out;
}
Example:
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo-box:hover .logo {
animation: moveInRight 1.5s ease-out;
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="logo-box">
<img class="logo" src="img/logo-white.png">
</div>
You have to make the logo box bigger, in HTML you have to do that in body and check your image pawn / your css left
.logo-box {
position: absolute;
top: 40px;
left: 40px;
}
.logo {
height: 35px;
}
.logo:hover {
animation: moveInRight 1.5s ease-out;
}
#keyframes moveInRight {
0% {
opacity: 0;
transform: translateX(100px);
}
80% {
transform: translateX(-10px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
<div class="logo-box">
<img class="logo" src="img/logo-white.png">
</div>
Related
I need to create this animation
1: https://i.stack.imgur.com/FVvJQ.gif
Original animation is above link, the code must be like that.
Could you please help me with that.
I cannot make correct animation , here is my full code.
Here is my current code.
(.........................................................................................................................................................................................................................................................................................................................)
body {
background-color: #01143B;
}
#keyframes pulse {
0% {
transform: scale(0.9);
opacity: 0.8;
}
25% {
opacity: .4;
}
50% {
transform: scale(1.4);
opacity: 0.8;
}
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 200px;
height: 200px;
}
div:nth-child(1) {
animation: pulse 3s infinite;
}
div:nth-child(2) {
animation: pulse 4s infinite .5s;
}
div:nth-child(3) {
animation: pulse 5s infinite .7s;
}
img {
position: absolute;
margin-left: 70px;
margin-top: 65px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
.circle {
background-color: white;
}
<div></div>
<div></div>
<div></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I have added a class to each individual DIV to work when built into a design.
It is necessary to have a separate animation timing for each circle
I hope I've been helpful
body {
background-color: #01143B;
}
img {
position: absolute;
margin-left: 43px;
margin-top: 43px;
text-align: center;
font-size: 14px;
line-height: 80px;
width: 70px;
height: 70px;
}
div {
background-color: #d4d4d4;
border-radius: 50%;
position: absolute;
margin: auto auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity: 0.1;
}
#keyframes pulse_1 {
10% { transform: scale(1); }
20% { transform: scale(0.95); }
30% { transform: scale(1); }
}
.circle {
background-color: white;
animation: pulse_1 3s infinite 1s;
width: 150px;
height: 150px;
opacity: 1;
}
#keyframes pulse_ca {
15% { transform: scale(1); }
25% { transform: scale(0.95); }
35% { transform: scale(1); }
}
div.ca {
width: 180px;
height: 180px;
animation: pulse_ca 3s infinite 1s;
}
#keyframes pulse_cb {
20% { transform: scale(1); }
30% { transform: scale(0.95); }
40% { transform: scale(1); }
}
div.cb {
width: 210px;
height: 210px;
animation: pulse_cb 3s infinite 1s;
}
#keyframes pulse_cc {
25% { transform: scale(1); }
35% { transform: scale(0.95); }
45% { transform: scale(1); }
}
div.cc {
width: 240px;
height: 240px;
animation: pulse_cc 3s infinite 1s;
}
<div class="cc"></div>
<div class="cb"></div>
<div class="ca"></div>
<div class="circle"><img src="play-button-arrowhead.png"></div>
I want to show an animation of drawing an angled and straight line and to show my text from left to right when hovering over a button and I am fairly new at this. also is there a way for my text to stay and not go away after animation finishes?
Here is my code, the code is a combination of other answers from stack overflow.
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
You need to add/toggle a class on the div.skew element with Javascript, and define animation rules on that class or children of elements with that class, like so:
var button = document.querySelector("button.menubtn"); //Select the button
var skewElement = document.querySelector("div.skew"); //Select the 'skew' element
button.onmouseover = function(){
skewElement.classList.toggle("startAnimation");
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
}
.skew.startAnimation {
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
}
.startAnimation .line {
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
opacity: 0;
position: relative;
top: -17px;
left: 15px;
}
.startAnimation .showText {
animation: showText 2s;
animation-fill-mode: forwards;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn">hover over me</button>
</div>
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
In order to have the text visible even after animation's end, you have to specify animation-fill-mode: forwards on .showText, like I have done in the snippet above.
To get the animation done on hovering, first we have to create an event for hovering for that particular element using javascript
Then call a function when that event is triggered , for you it will be displaying some animations
Just for simplicity , i just made a parent div for your entire animation elements , and not displaying initially
Later on hovering , we change the css display property of that parent element to block which will display all of your animated elements
Also to make sure your text stays after animation , there is an animation property called forwards which will keep your final animation state for the later time
var hvrbtn=document.getElementById("hvrbtn");
hvrbtn.onmouseover=()=>{
var anim=document.getElementById("anim");
anim.style.display="block";
};
.animated{
display:none;
}
.skew {
position: relative;
margin: 100px;
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(-45deg);
animation: draw 0.5s linear;
animation-fill-mode: forwards;
}
.line {
position: absolute;
left: 100%;
top: 0;
content: '';
width: 0;
height: 2px;
background: #f00;
transform-origin: 0 100%;
transform: rotate(45deg);
animation: drawLine 0.7s linear;
animation-delay: 0.5s;
animation-fill-mode: forwards;
}
.showText {
animation: showText 2s forwards;
position: relative;
top: -17px;
left: 15px;
opacity: 0;
}
#keyframes showText {
0% {
opacity: 0;
transform: translateX(-20px);
}
50% {
opacity: 0;
}
100% {
opacity: 1;
transform: translateX(0);
}
}
#keyframes draw {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
#keyframes drawLine {
0% {
width: 0px;
}
100% {
width: 100px;
}
}
<div>
<button class="menubtn" id="hvrbtn">hover over me</button>
</div>
<div class="animated" id="anim">
<div class="skew">
<div class="line">
<div class="showText">menu item</div>
</div>
</div>
<div>
I need a slider which would move slides in a vertical direction. The issue with my code is that transition between slides are too slow. Each slide should stay at least 5 sec and transition between next slide should be very quick like we see at the slick slider and so.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 17s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 6.25s;
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 11.5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(10px);
opacity: 1;
}
25% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-20px);
opacity: 1;
}
50.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
JSFiddle
You need to adjust the values of
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 3s infinite; /*adjust here*/
}
#slideshow li:nth-child(2) {
animation-delay: 1.25s; /*Adjust here*/
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 1.5s;/*Adjust here*/
opacity: 0;
}
https://jsfiddle.net/Ljhdeb0c/6/
By changing percentage of animation keyframe I have done it. This is what I was looking for.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
position: absolute;
left: 0px;
height:20px;
top: 0;
animation: slide 10s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(20px);
opacity: 1;
}
5%, 50%{
transform: translateY(0);
opacity: 1;
}
51% {
transform: translateY(-20px);
opacity: 0;
}
51.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
</ul>
fiddle
I have some moving word css3 animation.
The animation is fine (snippet). If someone use hover the animation stops (fine), but don't accept a change of the opacity and z-index (.bubble:hover).
opacity: 1;
z-index: 100;
The .bubble:hover class is in use the transform action works.
transform: scale(1.2);
The aim is to pop the hovered bubble in the foreground.
If the bubble is left the animation should move on from the point of stop.
How can I fix it?
Thanks for help.
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1;
z-index: 100;
}
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale, color;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.5;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>
This happend cause you gave to parent div less opacity with "color" keyframes and then apply that animation to parent of a hovered div. You should make color changes on "bubble" div.
codepen:
http://codepen.io/bra1N/pen/dXKLbp
.solSystem {
postion: absolute;
height: 25vw;
}
.orbitLink,
.orbitLink:active,
.orbitLink:visited {
color: #FFF;
}
.mars:hover,
.earth:hover {
animation-play-state: paused;
}/*
.bubble:hover {
background: #DE383B !Important;
padding: 1vw;
border: 0.1vw solid #000;
color: #FFF !Important;
transform: scale(1.2);
opacity: 1 !important;
z-index: 100 !important;
}*/
.mars {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveRigthToLeft, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.earth {
float: left;
margin: 4vw auto;
border-radius: 50%;
position: absolute;
animation-name: moveLeftToRigth, scale;
animation-iteration-count: infinite, infinite;
animation-timing-function: ease-in-out, linear;
}
.bubble {
padding: 1vw;
color: #FFF;
border-color: #000;
border-width: 0.1vw;
background-color: #004A99;
font-weight: bold;
font-size: 1.1vw;
font-family: Arial, FreeSans, sans-serif;
position: absolute;
border-style: solid;
border-radius: 100%;
animation-name: color;
animation-iteration-count: infinite;
animation-duration: 30s;
}
#keyframes moveLeftToRigth {
0% {
left: 15vw;
}
50% {
left: 40vw;
}
100% {
left: 15vw;
}
}
#keyframes scale {
0% {
transform: scale(1);
}
32% {
transform: scale(0.7);
animation-timing-function: ease-in;
}
70% {
transform: scale(0.8);
animation-timing-function: ease-in;
}
75% {
transform: scale(0.9);
animation-timing-function: ease-in-out;
}
86% {
transform: scale(1.2);
}
98% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes color {
0% {
opacity: 0.4;
z-index: 1;
}
20% {
opacity: 0.6;
z-index: 2;
}
40% {
opacity: 0.7;
z-index: 3;
}
60% {
opacity: 0.8;
z-index: 4;
}
80% {
opacity: 0.9;
z-index: 5;
}
90% {
opacity: 1;
z-index: 6;
}
95% {
opacity: 0.8;
z-index: 4;
}
100% {
opacity: 0.6;
z-index: 2;
}
}
<div class="solSystem">
<a href="Test1.html">
<div class="earth" style="animation-duration: 20s,20s,20s;">
<div class="bubble" style="left:12vw;">
Test1
</div>
</div>
</a>
<a href="Test2.html">
<div class="mars" style="animation-duration: 30s,30s,30s;">
<div class="bubble" style="left:30vw;">
Test2
</div>
</div>
</a>
</div>
I've been struggling with this for the past few days, so help would be greatly appreciated. I have a Title with a line (hr element) right below it. I'm trying to have a div centered in the hr that grows and shrinks. However, when the css3 animation is applied it causes the div to be displaced down and to the right, as if the div's top-left point (which I think is (0,0)) is set to be where the middle was.
I've created a jsfiddle to illustrate what I mean.
Here's my html:
<div id="header">
<h1>Center</h1>
<div id="action-bar">
<hr class="center-line" />
<div class="circle animation"></div>
</div>
</div>
and my css:
div#header {
color: #000;
width: 90%;
text-align: center;
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
div#header h1 {
font-size: 50px;
font-weight: 300;
margin-top: 0px;
margin-bottom: 0px;
}
/* the line beneath h1 */
div #action-bar {
margin: 25px 0;
position: relative;
}
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
div.circle:hover {
width: 2em;
height: 2em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
}
hr.center-line {
border: 0;
height: .25em;
background: #000;
}
/* animation */
#keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
#-webkit-keyframes pulse {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(90deg);
}
100% {
transform: rotate(180deg);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
Can anybody point be in the right direction? I'm looking for a pure-css solution if possible. Thanks!
Add negative margin to your circle element, half of it's width and height:
div.circle {
width: 1em;
height: 1em;
background: #000;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
margin-left: -0.5em;
margin-top: -0.5em;
}
div.circle:hover {
width: 2em;
height: 2em;
margin-left: -1em;
margin-top: -1em;
}
jsFiddle Demo.
Here is a smooth pulsing option.
http://jsfiddle.net/aLjsut5r/4/
/* animation */
#keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
#-webkit-keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(.8);
}
100% {
transform: scale(1);
}
}
.animation {
animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-animation: pulse 2s ease-in-out 0s infinite normal none;
-webkit-backface-visibility: hidden;
}
.pulsing {
border: 3px solid #999;
-webkit-border-radius: 30px;
height: 18px;
width: 18px;
position: absolute;
left:20px;
top:214px;
-webkit-animation: pulsate 1s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.0;
}
#-webkit-keyframes pulsate {
0% {-webkit-transform: scale(0.5, 0.5); opacity: 0.5;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1.2, 1.2); opacity: 0.5;}
}