一、animation的语法
1、@keyframes——插入关键帧
(1)FormTo形式:
- @keyframes demo {
- from {
- Properties:Properties value;
- }
- Percentage {
- Properties:Properties value;
- }
- to {
- Properties:Properties value;
- }
- }
(2)百分比的形式:
- @keyframes demo {
- 0% {
- Properties:Properties value;
- }
- Percentage {
- Properties:Properties value;
- }
- 100% {
- Properties:Properties value;
- }
- }
2、animation-name——定义动画的名称
animation-name: none | “动画的名称”;
(1)动画的名称是由Keyframes创建的动画名,这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果
(2)none为默认值,当值为none时,将没有任何动画效果
3、animation-duration
animation-duration: time (s)
animation-duration是指定元素播放动画所持续的时间,取值为数值,单位为秒(s),其默认值为“0”。
4、animation-timing-function
animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)
animation-timing-function是用来指定动画的播放方式,具有以下六种变换方式:ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。
5、animation-delay
animation-delay: time(s)
animation-delay:是用来指定元素动画开始时间。取值为数值,单位为秒(s),其默认值为“0”。这个属性和animation-duration使用方法是一样的。
6、animation-iteration-count
animation-iteration-count:infinite || number
animation-iteration-count是指定元素播放动画的循环次数,其取值为数字,默认值为“1”或者infinite(无限次数循环)。
7、animation-direction
animation-direction: normal || alternate
animation-direction是指定元素动画播放的方向,如果是normal,那么动画的每次循环都是向前播放;如果是alternate,那么动画播放在第偶数次向前播放,第奇数次向反方向播放。
8、animation-play-state
animation-play-state:running || paused
animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值,running和paused,其中running为默认值。这个属性目前很少内核支持,所以只是稍微提一下。
二、animation事件接口
其实目前基本的就是三个事件而已:开始、迭代、结束。开始和结束都知道是什么意思。至于这个迭代,由于animation中有个iteration-count属性,它可以定义动画重复的次数,因此动画会有许多次开始和结束。但是真正的“开始”和“结束”事件是关于整个动画的,他们只会触发一次,而中间由于重复动画引起的“结束并开始下一次”将触发整个“迭代”事件。
这三个事件的标准名称是:
开始:animationstart
迭代:animationiteration
结束:animationend
但是目前版本的Chrome需要加上webkit前缀,而且还要注意大小写
开始:webkitAnimationStart
迭代:webkitAnimationIteration
结束:webkitAnimationEnd
最后是实例代码和截图
- <style>
- @-webkit-keyframes test {
- 0% {background:red;}
- 25% {background:green;}
- 50% {background:blue;}
- 100% {background:red;}
- }
- @keyframes test {
- 0% {background:red;}
- 25% {background:green;}
- 50% {background:blue;}
- 100% {background:red;}
- }
- </style>
- <script>
- onload=function(){
- var html=document.documentElement;
- //定义事件回调函数
- var start=function(){
- console.log("start");
- },iteration=function(e){
- console.log(e);
- },end=function(){
- console.log("end");
- };
- //绑定事件
- html.addEventListener("webkitAnimationIteration",iteration);
- html.addEventListener("animationiteration",iteration);
- html.addEventListener("webkitAnimationStart",start);
- html.addEventListener("animationstart",start);
- html.addEventListener("webkitAnimationEnd",end);
- html.addEventListener("animationend",end);
- //开始执行动画
- html.style.animation=
- html.style.WebkitAnimation=
- "test 1s linear 0s 3";
- };
- </script>
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]