I want a text to move a few pixels up when on hover. Let's say I want the animation to last 2 seconds but if after those 2 seconds I'm still on hover I don't want the animation to repeat again and again. I just want the position of my text to hold where it is while I'm on hover.
I tried this but not working:
.css-class:hover {
animation-name: in;
animation-duration: 2s infinite;
animation-iteration-count: infinite;
}
.css-class {
animation-name: out;
animation-duration:2s;
}
#keyframes in {
from {transform: translateY(0px);}
to {transform: translateY(-35px);}
}
#keyframes out {
from {transform: translateY(-35px);}
to {transform: translateY(0px);}
}
Thanks in advance.
In your class block and :hover block add this line of code
animation-fill-mode: forwards;
Related
I want to flip an image instantly every 1000ms. I'm trying but the animation does what it's supposed to do (gradually flip the picture). If i can flip instantly the picture it will give the idea of a walking duck. I know I can use setInterval() but I'd rather do this in CSS only.
.duck {
position: absolute;
animation: flip-me;
animation-duration: 1000ms;
animation-direction: alternate;
animation-iteration-count: infinite;
}
#keyframes flip-me {
0% { transform: scaleX(1) }
100% { transform: scaleX(-1) }
}
You can consider steps()
img {
animation: flip-me 2s steps(1) infinite;
}
#keyframes flip-me {
50% { /*Pay attention: it's 50% not 100% !!*/
transform: scaleX(-1)
}
}
/*no need 0% or 100% state as they be set by default to scaleX(1)*/
<img src="https://picsum.photos/200/200?image=1069">
I want to apply css animation on image only twice on mouseover
#keyframes vibrate
{
0% {transform: rotate(10deg)}
25% {transform: rotate(-10deg)}
50% {transform: rotate(0)}
75% {transform: rotate(10deg)}
100% {transform: rotate(0)}
}
But nothing seems to work. See DEMO
You need to have the -webkit- and -moz- prefixes on the #keyframes too.
So all of the #keyframes will have 3 copies, 2 with the prefixes and 1 without.
Also in the animation shorthand definition instead of infinite use the number of the times you want the animation to happen, 2.
Demo https://jsfiddle.net/ju4cuzqL/7/
You should set the animation-iteration-count: 2; if you want to control the number of iterations it runs.
DEMO
Also you have the animation explicitly running infinitely many times:
-webkit-animation: vibrate 0.1s linear 0s infinite both;
is the same thing as:
{
animation-name: vibrate;
animation-duration: 0.1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: both;
}
Your infinite property should be 2 instead:
animation: vibrate 0.1s linear 0s 2 both;
-webkit-animation: vibrate 0.1s linear 0s 2 both;
I'm trying to animate an image so that it keeps spinning infinitely, because it shall represent a loading process. The image is this one if you cannot imagine what I mean:
The problem is that after the animation has run it always stops for a moment. What can I do about it? Is there any way to make the transition fluent?
Here's the jsfiddle, where I replaced the image with a div
And the CSS seperately:
.load { /* load is a little div in this case */
height: 20px;
width: 20px;
border: 2px solid black;
animation-name: myAni;
animation-timing: linear;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-delay: 0;
-webkit-animation-name: myAni;
-webkit-animation-timing: linear;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
}
#keyframes myAni {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}
#-webkit-keyframes myAni {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
The problem is that animation-timing should be animation-timing-function, otherwise you get the default ease that causes the slow start and end. It was marked red in your JSFiddle.
I used below css3 code to animate and rotate my logo 360 degree and its work currectly, how can I pause animation 2 second after every 360 degree rotation?
#keyframes logo {
from {transform: rotateY(360deg);}
}
#-webkit-keyframes logo {
from {-webkit-transform: rotateY(360deg);}
}
#logo:first-of-type{
width:120px;
-webkit-animation-name: logo;
-moz-animation-name: logo;
-o-animation-name: logo;
animation-name: logo;
animation:logo 3s infinite;
-webkit-animation:logo 3s infinite;
animation-duration:2s;
-webkit-animation-duration:2s;
animation-delay:2s;
-webkit-animation-delay:2s;
}
you may include pause inside the animation itself :
#keyframes rotit {
from {
transform:rotatey(360deg);
}
66%, 100% {
transform:rotatey(0deg);
}
}
demo http://codepen.io/anon/pen/DmgcE
Okay, I have this text that I want to appear after 20s. I am using the animation-delay property but it is not working. Perhaps, I am doing something wrong.
Please help me out to get to right track..
Here is my code..
#import url(http://fonts.googleapis.com/css?family=Economica);
#text{
font-family:'Economica', sans-serif;
font-weight:bold;
position:absolute;
left:50%;
top:50%;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 5s;
animation-delay:15s;
-webkit-animation-delay:15s;
-webkit-animation:fade-in 5s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
Here is the link on Fiddle
Thank You for everything!
EDIT ONE:
After changing the order of the animation properties, and adding the opacity:0 in the text, I got the following
#text{
font-family:'Economica', sans-serif;
position:absolute;
left:50%;
top:50%;
opacity:0;
margin-left:-20px;
margin-top:-25px;
animation:fade-in 2s;
animation-delay:3s;
-webkit-animation:fade-in 2s;
-webkit-animation-delay:3s;
-o-animation:fade-in 2s;
-o-animation-delay:3s;
}
#keyframes fade-in{
from { opacity:0;}
to {opacity:1;}
}
#-webkit-keyframes fade-in{
from {opacity:0;}
to {opacity:1;}
}
But if I leave the opacity to 0 in the #text, the text will disappear once the animation is over.
How can I keep the text visible after the animation is done??
Thank you!
You've specified the -webkit versions in the wrong order. The -webkit-animation replaces the delay rule that you just set up. Reverse the order so that the delay comes after.
-webkit-animation:fade-in 5s;
-webkit-animation-delay:15s;
You can avoid these issues if you always set a single attribute:
-webkit-animation-name: fade-in;
-webkit-animation-duration: 5s;
-webkit-animation-delay: 15s;
Don't forget to also set:
opacity: 0;
Otherwise the text will be visible until the animation starts, and:
-webkit-animation-fill-mode: forwards;
So that the animated opacity is retained after fading in.
You need to place the animation-delay rule after the shorthand, as the shorthand is resetting your value to the default which is 0s - or you could just place it within the shorthand:
#text {
-moz-animation: fade-in 5s 15s;
-webkit-animation: fade-in 5s 15s;
animation: fade-in 5s 15s;
}
http://jsfiddle.net/wXdbL/2/ (changed the delay to 1s so it's obvious)