CSS3: Animate Frame Animation and Sprite – Complete a box opening animation

Write it up front

• Recently do a project about the lottery, will involve a lot of animation, here to discuss the SCSS function and CSS animation production

Requirements: As shown in figure

• An open box, where there are many irregular stars ✨ irregular movement, looking at this complex animation, I can not help zhou Dongyu body – small yellow duck frown. GIF.
• Having not written animation for a long time, HOW do I start with Animate in a limited CSS knowledge.

thinking

• 1. Box bounce animation
• 2, light screen, shadow animation
• 3. Irregular flight of the lid
• The stars fly irregularly

implementation

• 1.transform: scaleY() translate()Implement box bounce
• 2,opacityImplement light screen and shadows
• 3,transform: rotateZ()The lid flies and flips
• 4,top left transform: translate()Sports stars

I’ve got the general idea and I’m going to start writing an animation of the lid flying

// The box is centered.stars{
    opacity: 0;
}

.box{
    top:50%;
    left:50%;
    position:absolute;
    transform: translate(-50%, -50%); } // The base keyframes function@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content; }} // Since the layout is translate, the location is changed to translate@mixin animate-bounce($name:'bounce', $time: 1.5 s, $animateFunc: linear) {
  animation: $name $time ? animateFunc;@include keyframes($name) {
        0% {
            transform: scaleY(1) translate(-50%, -50%);
        }
        8% {
            transform: scaleY(0.98) translate(-50%, -48%);
        }
        50% {
            transform: scaleY(1) translate(-50%, -70%);
        }
        100% {
            transform: scaleY(1) translate(-50%, -50%); }}}}@mixin animate-box-cover-fly($name:'box-cover-fly', $time: 1.5 s, $animateFunc: linear){
    animation: $name $time ? animateFunc;@include keyframes($name) {
        0% {
            top: 23%;
            left: 50%;
        }
        100% {
            top: 5%;
            left: 62%;
            transform: translate(-20%, -50%) rotateZ(26deg); }}}} // Box bounces.box-bounce{
    @include animate-bounce('bounce');
}

.box-cover-fly{
    @include animate-box-cover-fly('box-cover-fly');
}

Copy the code

thinking

• When I write here, I find that there is a lot of code, that is, I use the form of function to copy the animation path. In the concrete implementation, I find that the effect is not good and I cannot completely copy the animation designed.

• Then I googled animation implementation and found frame animation and Sprite. Although these two knowledge point had heard early, but when using, it is used separately. When combined can also do animation effects, say do do, first write a demo

• html

 <div className="step-box" />
Copy the code

@mixin animate-spite-box($width: 134px) {
  background: url('https://uploads.codesandbox.io/uploads/user/abc364e4-ea65-4398-a1dc-df2645675b64/U59a-lightbulb.png') 0 0 no-repeat;
  background-size: cover;
  animation: spite-box 1s steps(4) infinite;
  @include keyframes(spite-box) {
    from {
      background-position: -8*$width;
     }
     to {
      background-position: -12*$width;
     }
  }
}

$box-width: 134px
$box-height: 113px;
.step-box{
    width: $box-width;
    height: $box-height;
    @include animate-spite-box($box-width);
}
Copy the code

Let’s start with a chestnut 🌰

@mixin keyframes($animationName) {
  @keyframes #{$animationName} {
      @content; }}@mixin animate-spite-box($width: 134px) {
  background: url('https://uploads.codesandbox.io/uploads/user/abc364e4-ea65-4398-a1dc-df2645675b64/U59a-lightbulb.png') 0 0 no-repeat;
  background-size: cover;
  animation: spite-box 1s steps(4) infinite;
  @include keyframes(spite-box) {
    from {
      background-position: -8*$width;
     }
     to {
      background-position: -12*$width; }}}.step-box{
    width: 134px;
    height: 113px;
    @include animate-spite-box(134px);
}
Copy the code

• Take a look at the codepen-demo above

Decided to use Sprite graphics and step frame animation to achieve

• Learning from the chestnuts above, let’s create our own Sprite images and frame by frame animation.
• Use Sprite background-position animation and animate step functions.
• According to the PNG image provided by the design, Sprite image was made. The following website was used. The website would automatically calculate the position of each image, and then we wrote it in background-postion, and completed our frame animation according to the method of demo.
• www.toptal.com/developers/…

Some knowledge points

css3 animate

• Animate frame by frame
• animation-fill-mode: forwards; Leave the animation as it is now
• Animation-rotund-count: infinite loop animation

reference

• Developer.mozilla.org/zh-CN/docs/…
• www.jianshu.com/p/5c9844c25…
• Segmentfault.com/a/119000002…