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
Related
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;
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've got the code below that I want to make some div bounce. At the moment they don't seem to move at all, where am I going wrong?
Here's a fiddle
#-webkit-keyframes bounceup {
0% { -webkit-transform:translateY(0); }
40% { -webkit-transform:translateY(30px); }
60% { -webkit-transform:translateY(15px); }
}
#keyframes bounceup {
0% { transform:translateY(0); }
40% { transform:translateY(30px); }
60% { transform:translateY(15px); }
}
#-webkit-keyframes bounceleft {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(-30px); }
60% { -webkit-transform:translateX(-15px); }
}
#keyframes bounceleft {
0% { transform:translateX(0); }
40% { transform:translateX(-30px); }
60% { transform:translateX(-15px); }
}
#-webkit-keyframes bounceright {
0% { -webkit-transform:translateX(0); }
40% { -webkit-transform:translateX(30px); }
60% { -webkit-transform:translateX(15px); }
}
#keyframes bounceright {
0% { transform:translateX(0); }
40% { transform:translateX(30px); }
60% { transform:translateX(15px); }
}
.bounceup {
-webkit-animation-name: bounceup 2s infinite;
animation-name: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation-name: bounceleft 2s infinite;
animation-name: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation-name: bounceright 2s infinite;
animation-name: bounceright 2s infinite;
}
The problem seems to be with how you set your animations in your classes. You are using animation-name, but you are declaring more than just the name; you are adding values for animation-iteration-count and animation-duration as well.
Try instead:
.bounceup {
-webkit-animation: bounceup 2s infinite;
animation: bounceup 2s infinite;
}
.bounceleft {
-webkit-animation: bounceleft 2s infinite;
animation: bounceleft 2s infinite;
}
.bounceright {
-webkit-animation: bounceright 2s infinite;
animation: bounceright 2s infinite;
}
Edit:
Seems like #Harry modified his comment and pointed precisely the above. Basically you were trying to use the shorthand version of animation but for the animation-name property.
An alternative solution would be (the non-shorthand version):
.bounceup {
animation-name: bounceup;
-webkit-animation-name: bounceup;
animation-duration: 2s;
-webkit-animation-duration: 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
I made a working copy for you:
-webkit-animation: bounceup 5s infinite;
animation: bounceup 5s infinite;
https://jsfiddle.net/nu78enm3/2/
and a link to the shorthand technique:
http://www.w3schools.com/cssref/css3_pr_animation.asp
I am trying to spin a null set image but my code is not working.
If I ran on my own computer, the picture goes black and spin.
What is the problem?
#-webkit-keyframes rotate {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
#refresh {
width:48px;
height:48px;
position:fixed;
top:150px;
right:150px;
background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif);
-webkit-animation: rotate 2s linear infinite;
}
<div id="refresh" ></div>
http://jsfiddle.net/Pg2pj/
It seems to work just fine. Here: http://cssdesk.com/6VyMM
I updated your FIDDLE, have a look.
Hope this can help you
You can also use percent in your animation instead of from and to
CSS:
#-webkit-keyframes rotate {
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
#refresh {
width: 48px;
height: 48px;
top: 0px;
right: 0px;
background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat;
background-size: 100% 100%;
-webkit-animation: rotate 2s linear 0s infinite;
}
Remember for cross-browser compatibility:
#-webkit-keyframes rotate {
0% { }
100% { }
}
#-moz-keyframes rotate {
0% { }
100% { }
}
#-o-keyframes rotate {
0% { }
100% { }
}
#keyframes rotate {
0% { }
100% { }
}
#refresh {
-webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */
-moz-animation: rotate 2s linear 0s infinite /* Fx 5+ */
-o-animation: rotate 2s linear 0s infinite /* Opera 12+ */
animation: rotate 2s linear 0s infinite /* IE 10+ */
}
I found a nice tutorial on css3 transitions by richard bradshaw which can be found at
http://css3.bradshawenterprises.com/cfimg/
I am trying to set up my Master Page (ASP.Net 4) with a div that has 3 images transitioning
Visual Studio 2010 doesn't like the following keyframes directives AT ALL why? I am set on html5 and css3.
#-webkit-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
#-moz-keyframes cf3FadeInOut {
0% {
opacity:1;
}
25% {
opacity:1;
}
75% {
opacity:0;
}
100% {
opacity:0;
}
}
Here is the animation code;
.logotransitions img.top {
-webkit-animation-name: cf3FadeInOut;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 18s;
-webkit-animation-direction: alternate;
-moz-animation-name: cf3FadeInOut;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 18s;
-moz-animation-direction: alternate;
}
Those are just the animation definitions... you still need to declare that your targeted elements use that animation :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite;
-moz-animation : cf3FadeInOut 1s ease infinite;
animation : cf3FadeInOut 1s ease infinite;
}
By the way, unless you're targeting only webkit & mozilla browsers, you should update your code (definitions & declarations) to include all the browser vendors :
div {
-webkit-animation : cf3FadeInOut 1s ease infinite; /*webkit*/
-o-animation : cf3FadeInOut 1s ease infinite; /*opera*/
-moz-animation : cf3FadeInOut 1s ease infinite; /*mozzila*/
-ms-animation : cf3FadeInOut 1s ease infinite; /*ie*/
animation : cf3FadeInOut 1s ease infinite; /*no vendor*/
}
/*...*/
#-o-keyframes cf3FadeInOut {/*...*/}
/* ... and so on*/