1. Animation concept

An important use of CSS3 is animation, which makes an element gradually change from one style to another. You are free to change any number of CSS properties. To use CSS animations, you must first assign some keyframes to the animation. Keyframes contain the styles an element has at a specific time.

2. Basic usage of animation

1. Animated template

/* 动画代码,在style样式定义一个动画，名字为example */
<style>
@keyframes example {
     
     
/*  "from" 和 "to"（代表 0％（开始）和 100％（完成）） */
  from {
     
     background-color: red;}//开始颜色为红色
  to {
     
     background-color: pink;}//完成时的颜色为粉色
}

/* 向此元素应用动画效果 */
div {
     
     
  width: 100px;//盒子宽度
  height: 100px;//盒子高度
  background-color: red;//背景颜色
  animation-name: example;//调用动画，exampl为定义的动画名字
  animation-duration: 4s;//动画持续时间
}
</style>

2. The use of animation

1 animation-name: Call the defined animation name
2 animation-duration: Define the duration of the animation, the default time is 0s
3 animation-delay: Define the animation delay time
4 animation-direction: Define the movement direction of the animation, specify whether to play forward, backward or alternately play the animation, as follows Four parameters:

normal- The animation plays normally (forward). Defaults
reverse- the animation plays in the reverse direction (backwards)
alternate- The animation plays forward first, then backward
alternate-reverse- The animation plays backwards first, then forwards

5 animation-timing-function: Define the speed curve of the animation

ease- Specifies an animation that starts slow, speeds up, and ends slowly (default)
linear- Specifies an animation with the same speed from start to finish
ease-in- Specifies animations that start at a slow speed
ease-out- An animation that specifies a slow end
ease-in-out- Specify start and end slower animations
cubic-bezier(n,n,n,n)- run you define your own value in the cubic Bessel function

6 animation-iteration-count: Define the number of times to play the animation, there are two parameters in total

n- n is any positive integer
infinite- Animation infinite loop

7 animation-fill-mode: Specifies the style of the target element

none- Defaults. The animation does not apply any styles to the element before or after it executes.
forwards- The element will retain the style values set by the last keyframe (depending on animation-direction and animation-iteration-count).
backwards- The element will get the style value set by the first keyframe (depending on animation-direction), and retain that value during the animation delay.
both- Animation follows both forward and backward rules, extending animation properties in both directions.

8 animation-duration: Define the duration of the animation

3. Bear case

material:
insert image description here

First define an animation

 1. 小熊动作的定义 bear：动画的名字 */
		@keyframes bear{
			0%{
				background-position: 0 0;/* 定义初始化精灵图的位置 */
			}
			100%{
				background-position: -1600px 0;/* 只移动x轴，y轴不进行移动 */
			}
		}

Create a new div in the body

 2. 在body中新建一个div
<body>
		<div></div>
</body>

Set style style, call animation

<style>
		body{
     
     
			background-color: pink;/* 设置body背景颜色 */
		}
		/* 设置div样式 */
		div{
     
     
			position: absolute;/* 设置定位为绝对定位 */
			width: 200px;
			height: 100px;
			background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
			/*调用动画方法   动画名字 时间 步长 无限循环动画*/
			animation:bear 1.5s steps(8) infinite;
			/* steps(8)：设置8个步长，显得效果更佳、
			   infinite：无限循环
			   forwards：移动到指定位置后固定不动	 */
		}
</style>

Renderings: Bear animated gif

At this point, the effect has basically been realized, but the bear animation can only move in place, and will not move to the center of the screen like the effect, so at this time, it is necessary to redefine a new moving animation for the bear.

Create a new animation

<style>
/* move移动到中央 */
		@keyframes movebear{
     
     
			0%{
     
     
				left: 0px;/* 定义起始位置 */
			}
			100%{
     
     
				margin: 100px auto;
				left:50%;/* 定义移动后的位置 */
				transform: translateX(-50%);
				/* 向左走百分之50,等于自己宽度的一半，可以动态的根据width来调整 */
			}
</style>

Call the newly created animation, separated by commas when calling the new animation

<style>
/* 设置div样式 */
		div{
     
     
			position: absolute;/* 设置定位为绝对定位 */
			width: 200px;
			height: 100px;
			background: url(../../../images/image/bear.png) no-repeat;/* 导入小熊精灵图 */
			animation:bear 1.5s steps(8) infinite,movebear 3.2s forwards;
			/* steps(8)：设置8个步长，显得效果更佳、
			   infinite：无限循环
			   forwards：移动到指定位置后固定不动,保留最后一个元素定义的样式	 */
			/* 调用已定义的动画方法，调用两个动画需要用逗号分隔 */
		}
</style>

Show results

Summarize

The animation is still very interesting, if you are interested to know more about it!
animation summary

CSS study notes - animation animation first experience (bear case)

Article Directory