This is the 18th day of my participation in the August Genwen Challenge.More challenges in August

Animation concept

Animation is one of the disruptive features of CSS3. You can set up multiple nodes to control one or a group of animations. Often used to achieve complex animation effects.

Animations allow for more variation, more control, and continuous autoplay than transitions.

Use of animation

Define animation: Use @keyframes to define animation

Grammar:

@keyFrames Animation name {%0{} 100%{}}Copy the code

The animation sequence

  • The rule that 0% is the beginning of the animation and 100% is the completion of the animation is the animation sequence
  • By specifying a CSS style in @KeyFrames, you can create an animation that changes gradually from the current style to the new style
  • Animation is the effect of changing an element from one style to another as many times as you want
  • Using percentages to specify when the animation takes place, or using the keywords from and to, equals 0% and 100%

Use animation

Div {animation-name: animation name: animation-duration: duration}Copy the code

Properties of animation

attribute describe
@keyframes Define the animation
animation Short for all animation properties except animation-play-state
animation-name Define @keyFrames the name of the animation, mandatory
animation-duration Specifies the number of seconds or milliseconds it takes for the animation to complete a cycle. Default: 0
animation-timing-function Specify the speed curve of the animation, by default ease
animation-delay Specifies when the animation should start, default 0 immediately
animation-iteration-count Specifies the number of times the animation can be played, which is 1 by default, with an infinite loop
animation-direction Specifies whether the animation is played in reverse in the next cycle. Default is normal, alternate in reverse
animation-play-state Specifies whether the animation is running or paused. The default is running and pause
animation-fill-mode Specify the state after animation, keep forward, back to start backwards

Animation shorthand property

Animation: Animation name Duration Motion Curve When to start Playback Times Whether to reverse the animation start or end state

  • The shorthand property does not contain animation-play-state
  • Pause animation-play-state is often used in conjunction with mouseovers and so on
  • Animation-direction: alternate if you want the animation to walk back, instead of jumping back, animation-direction: alternate
  • After the box animation is finished, pause at the end position: animation-fill-mode: forward

Animation case

Case 1: Achieve ripple effect

<html> <head> <title>demo3</title> <style> body { background-color: #333; } .map { position: relative } .city { position: absolute; top: 300px; right: 50% } .dotted { width: 8px; height: 8px; background-color: #0099ff; border-radius: 50%; } .city div[class^='pulse'] { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation-name: pulse; Animation - duration: 1.2 s; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes pulse { 0% {} 70% { width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; }}. City div.pulse2 {animation-delay: 0.4s; }.city div.pulse3 {animation-delay: 0.8s; } </style> </head> <body> <div class="map"> <div class="city"> <div class="dotted"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div class="pulse3"></div> </div> </div> </body> </html>Copy the code

Case 2: Running bear

Basic idea: As shown in the picture below, there are 8 big bears in different states on one picture, and the width of each big bear is about 160px. We define a div box with a width of 160px, and use this picture as the background picture of the box. Then, we control the position of the background picture through animation, and move the position of the big bear one at a time. So 8 big bears (total width of background image) divided into 8 moves end. We need to set the animation-timing-function property as steps(8), so that the sequence looks like a big bear running. Then we define a set of animations that move the box. Move the box from left to right. Groups of animations are separated by commas.

​

<html> <head> <title>demo3</title> <style> body { background-color: #000; } .bear { position: absolute; width: 160px; height: 80px; top: 50%; transform: translateY(-50%); background: url(./bear-25676f9.png) no-repeat; animation: bear 1s steps(8) infinite, move 5s linear infinite; } @keyframes bear { 0% { background-position: 0 0; } 100% { background-position: -1280px 0; } } @keyframes move { 0% { left: 0; } 100% { left: 100% } } div:nth-child(2) { animation-delay: 1s; Animation - duration: 2.5 s; } div:nth-child(3){ animation-delay: 2s; animation-duration: 2s; } div:nth-child(4){ animation-delay: 3s; animation-duration: 1s; } div:last-child { animation-delay: 4s; } </style> </head> <body> <div class="bear"></div> <div class="bear"></div> <div class="bear"></div> <div class="bear"></div> <div class="bear"></div> </body> </html>Copy the code