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缩放来做