I am trying to make a simple animation where a paragraph tag loops around a div. Currently, I can't get the animation to play at all. After some looking, I saw a few other questions on SO where the solution was to add vendor prefixes. I'm on Chrome, so I added that prefix. That didn't work. I saw another where I needed to add the vendor prefix to the animation property, so I tried that. That didn't work, either.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animations</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<main>
<div class="box">
<p class="animated">Hello</p>
</div>
</main>
</body>
</html>
And my css in css/main.css:
.box {
width: 500px;
height: 500px;
background-color: #ddd;
}
#keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
#-webkit-keyframes around {
0% { left: 0;top: 0; }
25% { left: 500px; top: 0; }
50% { left: 500px; top: 500px; }
75% { left: 0; top: 500px; }
100% { left: 0; top: 0;}
}
p {
display: inline-block;
background-color: red;
color: white;
padding: 10px;
margin: 0;
}
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s linear infinite;
}
I have a codepen of it here: http://codepen.io/khall47/pen/pNogKz
When you change the left/top property values on an element, it needs to have a position or else nothing happens, so ..
..give the .animated rule position: relative; and it will work fine.
Updated codepen: http://codepen.io/anon/pen/gLOrwy
Side note, always put prefixed properties before non-prefixed in your CSS rules
Just add to your paragraph. It's because it's not declared in relative that it doesn't move. (neither on firefox)
position: relative;
In addition to other answers, if you want to have the same animation-timing-function for all the browser, you should give the same for all in .animated CSS block.
They both should be either:
.animated {
animation: around 4s linear infinite;
-webkit-animation: around 4s linear infinite;
}
or
.animated {
animation: around 4s ease-out infinite;
-webkit-animation: around 4s ease-out infinite;
}
Related
I want to animate a standing line from top to bottom using pure CSS. I have done it but the transform property also gets animated.
.line {
width: 5rem;
height: 1px;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
transform: rotate(90deg);
animation: stand linear 1s;
}
#keyframes stand {
0% {width: 0;}
100% {width: 5rem;}
}
<div class="line"></div>
That's because the animation applies for the whole element. Instead of rotating the element and then adjusting its width for the animation, you could do the same think but adjust its height.
.line {
width: 1px;
height: 5rem;
background-color: black;
position: absolute;
top: 3rem;
left: 3rem;
animation: stand linear 1s;
}
#keyframes stand {
0% {height: 0;}
100% {height: 5rem;}
}
<div class="line"></div>
The linear motion of a straight line means the line will start from one point, goes to the second point, and then came back to the starting point. It is a kind of to and from motion. We will be doing it using CSS only.
Approach: The approach is to first create a straight line and then animate it using keyframes. It will be done in a two-step. First for forwarding movement and second for backward movement. The below code will follow the same approach.enter code here
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to animate a straight
line in linear motion?
</title>
<style>
body {
margin: 0;
padding: 0;
background: green;
}
.Stack {
width: 400px;
height: 2px;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.Stack::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: green;
animation: animate 5s linear infinite;
}
#keyframes animate {
0% {
left: 0;
}
50% {
left: 100%;
}
0% {
left: 0;
}
}
</style>
</head>
<body>
<div class="Stack"></div>
</body>
</html>
I am trying to move a horizontal line from right to left and when it while it moves it's length should reduce and become zero.
I tried with animation but it happening in loop. It should happen only once.
Here is the code which I tried
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 2;
animation-direction: initial;
overflow-y: hide;
}
#keyframes myfirst {
0% {
background: black;
left: 0px;
top: 0px;
}
100% {
background: white;
left: 100%;
top: 0px;
}
}
<div></div>
Is this correct or there is better way to achieve it?
Adding image for more clarity. Here on load black line has width 100% with time it's width reducing.
Without seeing it in a Codepen it's kinda hard to tell what's going on.
The correct animation property for one count would be animation: myfirst 10s 1;
However if that doesn't work, can you try adding animation-iteration-count: 1;?
Try to set this one:
div{
animation: myfirst 10s 1;
}
The last parameter of "animation" is for animation iteration count and you have it defined as "2".
Try swapping the values of left from the below section and it will give you your desired result. And for iteration count you can set the value here animation: myfirst 10s 2; from 2 to 1.
0% {
background: black;
left: 100%; -->this one
top: 0px;
}
100% {
background: white;
left: 0px; --> this one
top: 0px;
}
<!DOCTYPE html>
<html>
<head>
<style>
div {
top: 100px;
width: 100%;
height: 5px;
background: black;
position: relative;
animation: myfirst 10s 1;
animation-direction: initial;
overflow-y: hide;
}
#keyframes myfirst {
0% {
background: black;
left: 100%;
top: 0px;
}
100% {
background: white;
left: 0px;
top: 0px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
I am a novice in html5 and css3 and I am just playing around with the different css3 animation features. Could anyone kindly point out the error in the code below? The movement from left 0px to left 200px isn't working.
<!doctype html>
<html>
<head>
<title>
Experiment: animation with movements
</title>
<style>
footer{
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {left:50px;}
to {left:200px;}
}
#keyframes mymove {
from {left:50px;}
to {left:200px;}
}
</style>
</head>
<body>
<footer>
</footer>
</body>
</html>
Add position: relative; to the footer CSS
footer {
position: relative;
width: 100px;
height: 100px;
background: red;
animation: mymove 5s;
animation-play-state: running;
}
#-moz-keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
#keyframes mymove {
from {
left: 50px;
}
to {
left: 200px;
}
}
<footer></footer>
I have created a simple loading grid in my application, and added an animation over it. This animation seems to work in every browser except IE11.
Can somebody help me understand why it doesn't work and how to get it working in IE11?
.loading {
background-color: #ededed;
height: 12px;
width: 500px;
overflow: hidden;
}
.animation {
animation: loading 1.2s linear;
animation-iteration-count: infinite;
background-color: #e0e0e0;
height: 100%;
left: 0;
position: relative;
top: auto;
width: 300px;
}
#keyframes loading {
from {left: -30rem}
to {left: calc(100% + 30rem)}
}
<div class="loading">
<div class="animation"></div>
</div>
JSFiddle if you're interested: https://jsfiddle.net/9shufwsL/
Apparently calc() does not work in this context.
I changed the value of left in keyframes to use a percent based endpoint and it works in IE11.
.loading {
background-color: #ededed;
height: 12px;
width: 500px;
overflow: hidden;
}
.animation {
animation: loading 1.2s linear;
animation-iteration-count: infinite;
background-color: #e0e0e0;
height: 100%;
left: 0;
position: relative;
top: auto;
width: 300px;
}
#keyframes loading {
from {left: -30rem}
to {left: 110%}
}
<div class="loading">
<div class="animation"></div>
</div>
calc() does not work in IE you could change the #keyframes to:
#keyframes loading {
from {left: -30rem}
to {left: 30rem}
}
you could use -moz-calc and it would work but honestly not the best thing to do.
your keyframes would look like so:
#keyframes loading {
from {left: -30rem}
to {left: -moz-calc(100% + 30rem)}
}
I'm completely new to the world of animation and coding in general, scouring the internet I was able to find something close to what I want but right now the code only animates the image to slide in from the left but not slide back off screen after waiting for 10 seconds.
<html>
<head>
<style>
.wrapper {
position: relative;
overflow: hidden;
width: 500px;
height: 500px;
}
#slide {
position: absolute;
left: -130px;
width: 130px;
height: 330px;
-webkit-animation: slide 10s 0s 1;
-webkit-animation: slide 0.5s forwards;
-webkit-animation-delay: 2s;
animation: slide 2s forwards;
transition: 4s;
}
#-webkit-keyframes slide {
100% { left: 0; }
}
#keyframes slide {
100% { left: 0; }
}
</style>
</head>
<body>
<div class="wrapper">
<img id="slide" src="http://i.imgur.com/uqMkMLV.png" />
</div>
</body>
</html>
How can I fix this to make the image slide back off screen after it's been on screen for 10 seconds?
#keyframes slide {
from {
// declare animation
}
to {
// declare animation
}
}
This code can achieve what you want.
#keyframes slide {
0% {
left: -330px
}
10% {
left: 0px
}
90% {
left: 0px
}
100% {
left: -330px
}
}
Just try to adjust the animation-duration. Cheers!