css3 frame animation

Overview

A few days ago, I just saw a page that uses CSS3 frame animation . I was very interested in it. I studied it and recorded it below for reference in future development. I believe it will also be useful to others.

PS: In the future, when people ask me what CSS3 properties I have used, I can stop talking about common animations and transforms, and I can say frame animation , a high-level term haha.

This article refers to: CSS3 animation steps transition , CSS mask mask .

frame animation

Frame animation is actually the steps in animation in CSS3 . It can process static pictures into dynamic pictures. The principle is to constantly switch the picture , so that the picture "moves".

Below I illustrate with 2 examples.

Tuzki

You can see an example of this in the moving Tusky below the announcement on the top left of my blog . (Mobile terminal is not supported for now) (This Tusky is not a gif!!!)

Its code is as follows:

/* 兔斯基帧动画 */
@-webkit-keyframes rabbit {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
@keyframes rabbit {
  0% {background-position:0px -0%;}
  100% {background-position:0px -400%;}
}
div.myRabbit {
  height:35px;width:32px;
  -webkit-animation:rabbit 400ms steps(4) infinite;
  animation:rabbit 400ms steps(4) infinite;
  background:url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_%e5%85%94%e6%96%af%e5%9f%ba%e6%8f%89%e8%84%b8.png);
}

Among them, rabbit is an animation. The whole process is no different from the general animation definition animation, except that a steps(4) is used in the animation, which means that the process of animation 0%-100% is divided into 4 segments for playback.

There are three points to note:

1. Originally, the place where steps(4) is used is linear, linear means that the whole animation process is smooth, and steps(4) means that the whole animation process is divided into 4 frames, not smooth .
2. steps(4) can also accept a second parameter , the value is step-start or step-end, the former indicates that the first frame starts from the 0px -0%beginning, and then gradually increases; the latter indicates that the first frame starts from the 0px -100%beginning, and then gradually increases . For details, please refer to: In-depth understanding of CSS3 Animation frame animation .
3. steps(4) is for each animation . If there is a 2-segment animation, then each segment will be divided into 4 frames. So we can change the above code to the following. (This time is steps(2))

/* 兔斯基帧动画 */
@-webkit-keyframes rabbit {
  0% {background-position:0px -0%;}
  50% {background-position:0px -200%;}
  100% {background-position:0px -400%;}
}
@keyframes rabbit {
  0% {background-position:0px -0%;}
  50% {background-position:0px -200%;}
  100% {background-position:0px -400%;}
}
div.myRabbit {
  height:35px;width:32px;
  -webkit-animation:rabbit 400ms steps(2) infinite;
  animation:rabbit 400ms steps(2) infinite;
  background:url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_%e5%85%94%e6%96%af%e5%9f%ba%e6%8f%89%e8%84%b8.png);
}

ink splash effect

Every time I open my blog or open an article on my blog, there will be a "splashing ink" effect (mobile terminal is not supported for now). Frame animation is also used here. The code is as follows.

/* 泼墨帧动画 */
@-webkit-keyframes masky {
  0% {
  mask-position: 0 0;
  -webkit-mask-position: 0 0;
  }
  100% {
    mask-position: 100% 0;
    -webkit-mask-position: 100% 0;
  }
}
@keyframes masky {
    0% {
    mask-position: 0 0;
    -webkit-mask-position: 0 0;
    }
    100% {
      mask-position: 100% 0;
      -webkit-mask-position: 100% 0;
    }
}
div#home{
    -webkit-mask: url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_masky.png);
    mask: url(http://images.cnblogs.com/cnblogs_com/yangzhou33/1158868/o_masky.png);
    -webkit-mask-size: 4000% 100%;
    mask-size: 4000% 100%;
    -webkit-animation:masky 1s steps(39) forwards;
    animation:masky 1s steps(39) forwards;
}

The principle is roughly the same as that of Tusky. But there are a few things to note:

1. The mask property is used in it , which is the mask property of css3.
2. The mask attribute mask of css3 must be written in the entire containing block , for example, I wrote it in home. You cannot create a mask layer with absolute/fixed position to place it exclusively!