1、复杂动画
(1)涉及到的属性:
animation-name:动画名称;
animation-duration:单次动画总时长;
animation-timing-function:时间函数;
animation-delay:播放前延时的时长;
animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;
animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。
(2)书写方式
@keyframes 名字(自己取一个名字){ ——>定义一个动画}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge"&