This question already has answers here:
css "left" not working
(5 answers)
Closed last year.
It's probably something really simple and i'm just being stupid. The button won't show the animation. When I run the code, there is no error showing.
HTML:
<button id='testBtn' class='test'>Test</button>
CSS:
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-iteration-count: infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Check whether those styles work on the element before making an animation
#keyframes changePos {
0% {
margin-left: 0px;
}
50% {
margin-left: 1000px;
}
100% {
margin-left: 0px;
}
}
Add animation like this:
animation: changePos 5s infinite;
.test {
width: 100px;
height: 100px;
position: relative;
animation: changePos 3s infinite;
}
#keyframes changePos {
0%{left: 0px;}
50%{left: 1000px;}
100%{left: 0px;}
}
<button id='testBtn' class='test'>Test</button>
Set position: relative;
You can also use animation in short like animation: changePos 4s linear 0s infinite alternate;
#keyframes changePos {
0% {left: 0px;}
50% {left: 400px;}
100% {left: 0px;}
}
.test{
animation-name: changePos;
animation-duration: 3s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
position: relative;
/*animation: changePos 4s linear 0s infinite alternate;*/
}
<button id='testBtn' class='test'>Test</button>
Related
I'm trying to add animation to create something like a carousel, but the animation part in my CSS is not working.
div#trustw {
padding: 20px;
}
div#trustc {
height: 38px;
background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
background-repeat: repeat-x;
-webkit-animation: animatedBackground 20s linear infinite;
animation: animatedBackground 20s linear infinite;
animation-duration: 20s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: animatedBackgroud;
}
<div id="trustw" class="container-fluid">
<div id="trustc" class="container"></div>
</div>
You forgot to define the animation:
#keyframes animatedBackgroud {
from {background-position: 0%;}
to {background-position: 100%;}
}
div#trustw {
padding: 20px;
}
div#trustc {
height: 38px;
background-image: url(https://siasky.net/CAC--w_DduTHuvdgazKKQ87iMMSysgeoGje9_xsadF_qLw);
background-repeat: repeat-x;
-webkit-animation: animatedBackground 20s linear infinite;
animation: animatedBackground 20s linear infinite;
animation-duration: 20s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-fill-mode: none;
animation-play-state: running;
animation-name: animatedBackgroud;
}
#keyframes animatedBackgroud {
from {background-position: 0%;}
to {background-position: 100%;}
}
<div id="trustw" class="container-fluid">
<div id="trustc" class="container"></div>
</div>
I can't seem to find my mistake can you please help me?
I have put the -webkit- prefixes, also all elements are Valid
here's the code:
div {
width:200px;
height:200px;
background-color:red;
-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>
I expected it to move but I don't know what my mistake is in the code
You need add position :relative; to your css
div {
width:200px;
height:200px;
background-color:red;
position :relative;
-webkit-animation: easter 5s infinite;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation: easter 5s infinite;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div>
hi
</div>
</body>
First of all the webkit prefix will only apply to chromium based browsers. Second in order for top to apply you need to specifiy a position like absolute or relative:
div {
width:200px;
height:200px;
background-color:red;
position: absolute;
-webkit-animation-name: easter;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-delay:1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-name: easter;
animation-duration: 3s;
animation-timing-function: ease-in;
animation-delay:1s;
animation-iteration-count: infinite;
animation-direction: reverse;
}
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
<div>
hi
</div>
Additional information to the answer of #Hien Nguyen, I would suggest you to use the following syntax when using animations ans working with #keyframes in order to increase browsers comptability:
/* Safari 4.0 - 8.0 */
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
#keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
Instead of:
#-webkit-keyframes easter {
from {top: 0px;}
to {top: 200px;}
}
I have two images and I've found css ::after keeps one image on top of the other quite nicely, even when the screen size changes. The thing is I want the image underneath to spin and the image on top to remain stationary. I can't seem to do this and I'm not even sure this is possible using ::after. Is there a way to do it?
Here's my code:
.box {
display: inline-block;
position: fixed;
top: 50%;
left: 30%;
-webkit-animation-name: spinnerRotate;
-webkit-animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spinnerRotate;
-moz-animation-duration: 5s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spinnerRotate;
-ms-animation-duration: 5s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
.box:after {
content: '';
position: absolute;
width: 50px;
height: 50px;
top: 25px;
right: 0;
bottom: 0;
left: 25px;
background: url("../Content/images/top.png");
}
<div class="box">
<img src="../Content/images/bottom.png">
</div>
Here's the animation:
#-webkit-keyframes spinnerRotate
{
from{-webkit-transform:rotate(0deg);}
to{-webkit-transform:rotate(720deg);}
}
#-moz-keyframes spinnerRotate
{
from{-moz-transform:rotate(0deg);}
to{-moz-transform:rotate(720deg);}
}
#-ms-keyframes spinnerRotate
{
from{-ms-transform:rotate(0deg);}
to{-ms-transform:rotate(720deg);}
}
Well, you can do it like this:
#keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.box::after {
animation: rotate 5s infinite;
content:url("http://lorempixel.com/sports/400/200/");
}
<div class="box">
<img src="http://lorempixel.com/g/400/200/">
</div>
I changed your background-image with using the content property. This is not necessary but more comfortable, as you don't need to give the image dimensions.
Here is a nice article about css animations: https://css-tricks.com/almanac/properties/a/animation/
Here is information about compatibility: http://caniuse.com/#search=animation
I would like to design my CSS file in this way:
<h1 class="bounce">Bouncing Text</h1>
<h1 class="bounce fast">Faster Bouncing Text</h1>
I have CSS code that looks like this, but it doesn't seem to be working:
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
-webkit-animation-name: bounce-animation;
animation-name: bounce-animation;
-webkit-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
The 'fast' class does not seem to actually change the animation-duration at all. The two elements bounce at the same speed.
Is there anyway to make this design work? Thanks
Try this
.fast {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
.bounce {
position: relative;
-webkit-animation: bounce-animation 5s infinite;
animation: bounce-animation 5s infinite;
-webkit-animation-duration: 2s;
}
#-webkit-keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
#keyframes bounce-animation {
from {left: 0px;}
to {left: 200px;}
}
http://jsfiddle.net/x8326n81/3/
I realized that I was applying the animation to the ::after pseudo element. In order to see the results, I needed to adjust my fast CSS:
.fast,
.fast::after {
-webkit-animation-duration: 1s !important;
animation-duration: 1s !important;
}
display: block; will fix the problem. :)
i have following code to move div into left,
But what i want is to move it to left and then again move it back,,This should auto play..any idea??
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
#keyframes mymove {
from {left: 0px;}
to {left: 200px;}
}
Thank you!
You just need to add animation-direction: alternate. It will animate from the last keyframe value.
div {
width: 100px;
height: 100px;
background: red;
-webkit-animation: mymove 5s infinite alternate;
animation: mymove 5s infinite alternate;
position: absolute;
-webkit-backface-visibility: hidden;
}
#-webkit-keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 0px;
}
to {
left: 200px;
}
}
<div></div>
the following code should work
div
{
width:100px;
height:100px;
background:red;
-webkit-animation: mymove 5s infinite;
animation: mymove 5s infinite;
position:absolute;
}
#-webkit-keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
#keyframes mymove {
0% {left: 0px;}
50% {left: 200px;}
100% {left: 0px;}
}
<div></div>