I cannot get this animation to work for the life in me. It is supposed to move the square from side to side and change the background colour. Other people seem to be using the EXACT same code and getting the desired results. I have tried different supported browsers and even different computers to make sure it wasn't the computer. Any help will be appreciated.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3 Animation</title>
<link rel="stylesheet" type="text/css" href="animation.css" />
</head>
<body>
<h1>CSS3 Animation</h1>
<div class="square"></div>
</body>
</html>
CSS:
.square {
border: 3px solid black;
height: 50px;
width: 50px;
clear: both;
-webkit-animation-name: keyframeMoveDiv;
animation-name: keyframeMoveDiv;
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
-webkit-transition-duration: 5s;
transition-duration: 5s;
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
#keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; margin-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
#-webkit-keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; marign-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
I was using this in my css:
-webkit-transition-duration: 5s;
transition-duration: 5s;
When it needs to be animation duration instead. So:
-webkit-animation-duration: 5s;
animation-duration: 5s;
Demo
.square {
border: 3px solid black;
height: 50px;
width: 50px;
clear: both;
-webkit-animation: keyframeMoveDiv 5s; /* Chrome, Safari, Opera */
animation: keyframeMoveDiv 5s;
/* -webkit-animation-name: keyframeMoveDiv;
animation-name: keyframeMoveDiv;*/
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-iteration-count: infinite;
/* -webkit-transition-duration: 5s;
transition-duration: 5s;*/
-webkit-animation-timing-function: linear; /* Chrome, Safari, Opera */
animation-timing-function: linear;
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-delay: 2s;
animation-delay: 2s;
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
#keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; margin-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
#-webkit-keyframes keyframeMoveDiv {
0% {background:#FF0000; margin-left: 0;}
25% {background:#00FF00; margin-left: 200px;}
50% {background:#0000FF; margin-left: 500px;}
75% {background:#FFFF00; marign-left: 700px;}
100% {background:#00FFFF; margin-left: 0;}
}
Related
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>
The title basically gives it away. I have an animation working just fine in Chrome (80) and Firefox (57), but does not work in Safari (12) at all.
What I expect to happen is a straight line is drawn across the screen diagonally, from left top to right bottom.
I've tried a dozen variations of my code, the following is one:
(all the variations I tried work perfectly fine in Chrome and Firefox)
#move {
top:0;
left:0;
width: 0;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
-webkit-animation-name: mymove;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: linear;
-webkit-animation-fill-mode: forwards;
-webkit-transform: rotate(var(--a));
-webkit-transform-origin: top left;
-webkit-animation-delay: 1s;
-moz-animation-name: mymove;
-moz-animation-duration: 3s;
-moz-animation-timing-function: linear;
-moz-animation-fill-mode: forwards;
-moz-transform: rotate(var(--a));
-moz-transform-origin: top left;
-moz-animation-delay: 1s;
-ms-animation-name: mymove;
-ms-animation-duration: 3s;
-ms-animation-timing-function: linear;
-ms-animation-fill-mode: forwards;
-ms-transform: rotate(var(--a));
-ms-transform-origin: top left;
-ms-animation-delay: 1s;
-o-animation-name: mymove;
-o-animation-duration: 3s;
-o-animation-timing-function: linear;
-o-animation-fill-mode: forwards;
-o-transform: rotate(var(--a));
-o-transform-origin: top left;
-o-animation-delay: 1s;
animation-name: mymove;
animation-duration: 3s;
animation-timing-function: linear;
animation-fill-mode: forwards;
transform: rotate(var(--a));
transform-origin: top left;
animation-delay: 1s;
}
#-webkit-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-moz-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-ms-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#-o-keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
#keyframes mymove {
to {
width: var(--w);
/*background-color: rgb(67, 67, 92);*/
}
}
a shorter one:
#move {
top:0;
left:0;
width: 0;
height: 5px;
background: rgb(255, 255, 255);
position: absolute;
animation: mymove 3s;
animation-fill-mode: forwards;
transform-origin: top left;
transform: rotate(var(--a));
}
#keyframes mymove {
to {
width: var(--w);
}
}
The HTML:
<div id="move"></div>
I tried to consider:
webkit:
Why is my CSS3 animation not working in Chrome or Safari?
CSS3 animation: Not loading in Safari
Transform: rotate doesn't work in Safari
Splitting up the shorthand notation:
CSS3 animation not working in safari
Delaying the animation:
CSS3 animation not working in safari
None of what I tried seem to work in Safari. What am I missing here? Any help would be very much appreciated!
I had a very similar issue. Like the OP, I was setting up the keyframe using the 'to' property:
#keyframes dash {
to {
dash-offset: 0;
}
}
This seems to be fine with Chrome and Firefox. I discovered that Safari and iOS Safari require the 'from' property to be set as well. This is contrary to MDN's claim that 'If a keyframe rule doesn't specify the start or end states of the animation (that is, 0%/from and 100%/to), browsers will use the element's existing styles for the start/end states.'
I was animating a dynamic element, so I ended up using the Web Animations API to describe an animation that all browsers could understand:
const lineAnimationTiming: EffectTiming = {
duration: 1000,
easing: 'ease-in-out'
};
const length = line.getTotalLength();
line.style.strokeDasharray = `${length} ${length}`;
line.animate(
[
{ strokeDashoffset: length },
{ strokeDashoffset: 0 }
],
lineAnimationTiming
);
EDIT Sep 3, 2021:
Testing Safari using vanilla HTML/Javascript/CSS, this issue does not reproduce. See this Stackblitz.
I happened to be using Angular when I first encountered the issue. This issue does reproduce there. See this Stackblitz. Reported to Angular as this bug.
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 paragraphs with text in it. i want to animate this text. what i actually want is to move first paragraph from left on x-axis and second paragraph from right to left.
my code is working only for one direction either left or right.
here:
<!DOCTYPE html>
<html>
<head>
<style>
#text {
position:relative;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {top: 200px;}
to {top: 0px;}
}
#keyframes mymove {
from {top: 0px;}
to {top: 100px;}
}
#text1 {
position:relative;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {right: -200px;}
to {right: 0px;}
}
#keyframes mymove {
from {top: 0px;}
to {top: 100px;}
}
</style>
</head>
<body>
<p id="text">Some text goes here</p>
<p id="text1">text display animation</p>
</body>
</html>
i want to move second paragraph from right to left and first one from left to right.
what could be the possible solution?
DEMO
#text {
position:relative;
-webkit-animation: mymove infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove infinite;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove {
from {left: 200px;}
to {left: 0px;}
}
#keyframes mymove {
from {left: 200px;}
to {left: 0px;}
}
#text1 {
position:relative;
-webkit-animation: mymove1 infinite; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation: mymove1 infinite;
animation-duration: 2s;
}
/* Chrome, Safari, Opera */
#-webkit-keyframes mymove1 {
from {right: 200px;}
to {right: 0px;}
}
#keyframes mymove1 {
from {right: 200px;}
to {right: 0px;}
}
inside #text in css add
-webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
animation-direction: reverse;
http://jsfiddle.net/sxscmhy7/
the code below works fine on Chrome, but not on Safari:
#-webkit-keyframes jiggle {
0% {
transform: rotate(-.5deg);
-webkit-animation-timing-function: ease-in;
}
50% {
transform: rotate(1deg);
-webkit-animation-timing-function: ease-out;
}
}
.animated_container {
-webkit-animation-name: jiggle1;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 40%;
-webkit-animation-duration: 0.21s;
-webkit-animation-delay: -0.43s;
animation-name: jiggle1;
animation-iteration-count: infinite;
transform-origin: 50% 40%;
}
I created an example in this fiddle:
http://jsfiddle.net/2obx0rvL/
What am I missing here ? Thx!
It's because you're not setting the full range on the transform percentage. Safari requires that you specify the 100% endpoint. See this related answer: CSS3 animation not working in safari
You only use the webkit.prefix. You have to write the code again without the webkit prefix, so that other browsers like Safari, Internet Explorer or Firefox can use it.
#-webkit-keyframes jiggle {
0% {
transform: rotate(-.5deg);
-webkit-animation-timing-function: ease-in; animation-timing-function: ease-in;
}
50% {
transform: rotate(1deg);
-webkit-animation-timing-function: ease-out; animation-timing-function: ease-out;
}
}
.animated_container {
-webkit-animation-name: jiggle1;
-webkit-animation-iteration-count: infinite;
-webkit-transform-origin: 50% 40%;
-webkit-animation-duration: 0.21s;
-webkit-animation-delay: -0.43s;
animation-name: jiggle1;
animation-iteration-count: infinite;
transform-origin: 50% 40%;
animation-duration: 0.21s;
animation-delay: -0.43s;
}