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
Related
I am a total newbie, hope thats not too trivial:
How do I add to reveal.js slides? I tried to add
blink, .blink {
-webkit-animation: blink 1s step-end infinite;
-moz-animation: blink 1s step-end infinite;
-o-animation: blink 1s step-end infinite;
animation: blink 1s step-end infinite;
}
#-webkit-keyframes blink {
67% { opacity: 0 }
}
#-moz-keyframes blink {
67% { opacity: 0 }
}
#-o-keyframes blink {
67% { opacity: 0 }
}
#keyframes blink {
67% { opacity: 0 }
}
to the css and then wrote:
<section>headline:
<p class="fragment">text</p>
<p class="fragment">text</p>
<p class="fragment"><font color="FF1493"><blink>text that should blink in pink</blink></font></p>
</section>
but it didnt work.
What did I do wrong?
Thanks for help,
Jean
Don't use <blink> since it is depreciated
.blink {
animation: blink 1s step-end infinite;
color: pink;
}
#keyframes blink {
67% {
opacity: 0
}
}
<section>headline:
<p class="fragment">text</p>
<p class="fragment">text</p>
<p class="fragment blink">text that should blink in pink </p>
</section>
This question already has answers here:
CSS Auto hide elements after 5 seconds
(5 answers)
Closed 5 years ago.
I found this question CSS Auto hide elements after 5 seconds
and I need to know how to do the oposite of this.
Basically:
-Page loads with element hidden
-Wait 5 seconds
-Show element
I'm not very good with CSS so Any help would be nice!
#thingtohide {
-moz-animation: cssAnimation 0s ease-in 5s forwards;
/* Firefox */
-webkit-animation: cssAnimation 0s ease-in 5s forwards;
/* Safari and Chrome */
-o-animation: cssAnimation 0s ease-in 5s forwards;
/* Opera */
animation: cssAnimation 0s ease-in 5s forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
to {
width:0;
height:0;
overflow:hidden;
}
}
#-webkit-keyframes cssAnimation {
to {
width:0;
height:0;
visibility:hidden;
}
}
try this simple solution.
#showMe {
animation: cssAnimation 0s 5s forwards;
visibility: hidden;
}
#keyframes cssAnimation {
to { visibility: visible; }
}
<div id='showMe'>Wait for it...</div>
You can also use opacity insted of visibility
#showMe {
animation: cssAnimation 0s 5s forwards;
opacity: 0;
}
#keyframes cssAnimation {
to { opacity: 1; }
}
<div id='showMe'>Wait for it...</div>
You can run something like this. This sets the opacity to 0 and after a few seconds, it ramps it back to 100%. This option allows you to fine tune how quickly you want it to appear, giving you control over how much opacity the element would have and when in the timeframe it would have it.
#showMe {
opacity: 0;
-moz-animation: cssAnimation 5s;
/* Firefox */
-webkit-animation: cssAnimation 5s;
/* Safari and Chrome */
-o-animation: cssAnimation 5s;
/* Opera */
animation: cssAnimation 5s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
#keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
#-webkit-keyframes cssAnimation {
99% {
opacity: 0;
}
100% {
opacity: 1;
}
}
<div id='showMe'>Wait for it...</div>
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 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
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*/