2020-02-22

CSS3实现动画

动画在我们的印象中是 flash 不过在2020 在主流浏览器中已经不再继续支持flash动画了
没有CSS3之前，如果页面上需要一些动画效果，要么你自己编写 JavaScript，要么使用 JavaScript 框架(如 jQuery)来提高效率。
CSS3出来之后，实现鼠标悬停时)和在屏幕上移动元素之类的事情。例如动画，过渡和变换效果就很方便——今天来自逆战班的我给大家介绍一下
——————————————————————————————
在正式阐述animation动画之前，要了解其原理“逐帧动画”需要介绍一下 @keyframes 规则。

@keyframes 规则

用于创建逐帧动画。在 @keyframes 中规定某项 CSS 样式，就能创建每一帧由当前样式逐渐改为新样式的动画效果。这个逐帧动画会把运动过程划分为100份，每一个都是一个画面，显示整个运动过程，连起来就动起来了
该规则的基本信息
语法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname是动画名字；keyframes-selector帧选择器，用百分比定义，0%-100%，与from-to等价，作用是定义不同时间段的不同样式。
来个小尝试
@keyframes movie1 { /* 规定每一帧都做什么*/
0% { transform: translate(0px,0px);} /* 第0帧*/
25% { transform: translate(100px,0px);} /* 第1帧*/
50% { transform: translate(100px,100px);} /* 第2帧*/
75% { transform: translate(0px,100px);} /* 第3帧*/
100% { transform: translate(0px,0px);} /* 第4帧*/
}/这几个阶段 元素移动到了不同的地方 也是动画的内容元素是如何变化的/
以上命令语句只是规定了动画的内容 实际上，动画也有播放样式的参数 快速？ 慢速？ 还是淡入淡出？ 最基本的是在网页文档中要调用动画才能用吧，这就是animation标签
——————————————————————————————

animation

语法：animation: ; 这是复合写法 其中有很多属性
animatiom-name: 设置动画的名字;
animatiom-duration: 指定完成动画所花费的时间，单位为秒(s)或毫秒(ms) ;
animatiom-delay:
animatiom-iteration-count: 指定动画应该播放的次数，默认为1次，自己也可以定义播放次数，如2, 3, 4 以及无限次infinite
animation-timing-function: 指定动画的速度曲线 ;
ease(默认) 慢-快-慢
ease-in 动画以低速开始 ease-out 动画以低速结束
ease-in-out 快-慢-快
linear 一直匀速

animation-direction: 指定是否应该轮流反向播放动画 ;
animation-play-state: 指定动画是否正在运行或暂停。默认是 “running”
animation-fill-mode: 规定动画播放之前或之后，其动画效果是否可见
none 默认值，在运动结束后回到初始位置，在延迟情况下，在延迟后触发0%效果
backwards 在延迟的情况下 在延迟前触发0%的效果
forwards 在运动结束后停到结束位置
both 让backwards forwards 同时生效
animation-direction: 属性定义是否应该轮流反向播放动画
alternative 一次正向(0%~100%) 一次反向(100%～0%)
reverse 永远是反向，从100%～0%
normal 默认值 永远是正向(0%~100%)
复合样式，只有 duration delay 有先后顺序，第一个写的是 duration，第二个写的是 delay
调用animatiom方式
ul li:hover img{ animation:move 0.5s;}
{ animation:myMovie 2s 0s infinite linear;}

拓展学习
利用动画实现类似hover的效果
先做好静态布局，然后加上 ul li:hover img{ animation: move 1s;}
@keyframes move { 0%{transform: translate(0,0) opacity: 1;}
%{transform: translate(0,0) opacity: 1;}
}
——————————————————————————————
实践： loading 图的实现
先做静态布局 八个小圆 一个正方形四角都有小圆 再做一个这样的正方形叠加上，转45度即可
呼吸灯效果用scale缩放来做