I have created a pen by taking some code form W3S:
Question:
what does this signify →
@keyframes mymove {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px}
100% {top: 100px;}
}
HTML Part →
<body>
<div class="one"></div>
</body>
Does this signify that the total time set for 1 complete cycle of animation is 5 seconds. so 0%, 25%, 75%, and 100% is the time interval duration when the animation will change?
Or I am missing something?
PaulOB
December 17, 2017, 10:59pm
2
Yes it will take 5 seconds in total.
From 0% To 25% the element will animate from top:0 to top 200px during that 0 - 25% period (I.e. 1.25 seconds from start to finish ).
From 25% to 75% the element will animate from top 200px to top 50px.
And so on …
The element animates for the whole duration of the keyframe. It doesn’t suddenly change at 25% unless you had a setting at 24.9% that said top:0.
1 Like
Hi there codeispoetry,
the animation is not very smoooooooth.
The same, of course, can also be said about W3Schools"
<!DOCTYPE HTML>
<html lang="en">
<head>
<!--<meta http-equiv="Content-Security-Policy" content="default-src 'none'; img-src 'self';script-src 'self'; style-src 'self'">-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/150% verdana, arial, helvetica, sans-serif;
}
#box {
position: relative;
width: 6.25em;
height: 6.25em;;
background: #f16334;
animation: boxmove 5s ease-in-out infinite;
}
@keyframes boxmove {
0% { transform:translate( 0 , 0 ); }
25% { transform:translate( 0 , 12.5em ); }
50% { transform:translate( 0 , 3.125em ); }
75% { transform:translate( 0 , 9.375em ); }
100% { transform:translate( 0 , 0 ); }
}
</style>
</head>
<body>
<h1>Animation test</h1>
<div id="box"></div>
</body>
</html>
coothead
2 Likes
PaulOB
December 17, 2017, 11:18pm
4
That reminded me to say that it is better and smoother to use transform:translate() to move things rather than top as transform doesn’t cause a redraw of the whole page.
2 Likes
Thanks Paul, I have edited my post to include that suggestion.
coothead
3 Likes
I just browsed this link , and find that:
translate, scale, skewx etc are the features of the transform.
I applied the Keyframe
animation technique and the content:""
(Pseduo) technique to my website HTML .
.cchange {
color:#26292C;
}
.cchange:after {
content:"Responsive layout";
animation: cchange 12s linear infinite;
}
@keyframes cchange {
25% { content:"Responsive layout"; }
50% { content:"that means"; }
75% { content:"Cross browser"; }
100% { content:"Compatible"; }
}
But it lacks some smoothness. basically when one cycle of 12s finishes than I think this again is executed:
content:"Responsive layout";
so in nutshell the word “Responsive Layout” stays for a longer duration compared to the other words.
If I keep this empty:
content:"";
then for few milli seconds the heading completely disappears after one cycle finishes.
what is the fix sir?
codeispoetry:
what is the fix sir?
The fix is this…
@keyframes cchange {
0% { content: "Responsive layout"; } /* 0 - 3s */
25% { content: "that means"; } /* 3s - 6s */
50% { content: "Cross browser"; } /* 6s - 9s */
75% { content: "Compatible"; } /* 9 - 12s */
}
coothead
2 Likes
coothead:
The fix is this…
Now I am clear for future usage also. thanks a ton.
system
Closed
March 19, 2018, 5:30pm
9
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.