Keyframe animation

HTML & CSS
1

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?

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
3

Hi there codeispoetry,

the animation is not very smoooooooth. :rolleyes:
The same, of course, can also be said about W3Schools" :eyebrows:

<!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
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
5

Thanks Paul, I have edited my post to include that suggestion. :winky:

coothead

3 Likes
6

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?

7

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
8

Now I am clear for future usage also. thanks a ton.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.