css动画帧动画效果,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结。同时实现一个逐帧动画的demo作为练习
animation属性一览
因为animation属性比较多,然后在w3c上看有点蛋疼,干脆也做了一份导图,以后想查看,就一目了然了
使用animation实现逐帧动画
熟悉了animation的属性之后,得找个简单的小项目实现下,逐帧动画好有意思,先跑一个满足下自己
思路很简单,就是给元素一个雪碧图的背景,然后添加的帧动画更改background-position,关键代码:
css code复制内容到剪贴板
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -1540px0 ;
}
}
div{
width:140px;
height:140px;
background:url(run.png) ;
animation-name:run;
animation-duration:1s;
animation-iteration-count:infinite;
}
但是跑起来后我们发现,每帧动画之间帧动画都是滑动,并不是我们要的效果,为什么呢?
原来animation默认以ease方式过渡,它会在每个关键帧之间插入补间动画,所以动画效果是连贯性的
知道原因就好办了,解决思路就是:
css code复制内容到剪贴板
@keyframes run{
0%, 8%{/*动作一*/}
9.2%, 17.2%{/*动作二*/}
...
}
step1:动作之间停留8帧,0%设置动作一,动作一结束在8%
step2:动作之间过渡1.2帧,9.2%设置动作二,动作二结束在17.2%
完整代码:
xml/html code复制内容到剪贴板
html>
css3逐帧动画
@keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
@-webkit-keyframes run{
0%, 8%{ background-position: 0 0; }
9.2%, 17.2%{ background-position: -140px 0; }
18.4%, 26.4%{ background-position: -280px 0 ; }
27.6%, 35.6%{ background-position: -420px 0 ; }
36.8%, 44.8%{ background-position: -560px 0 ; }
46%, 54%{ background-position: -700px 0 ; }
55.2%, 63.2%{ background-position: -840px 0 ; }
64.4%, 72.4%{ background-position: -980px 0 ; }
73.6%, 81.6%{ background-position: -1120px 0 ; }
82.8%, 90.8%{ background-position: -1400px 0 ; }
92%, 100%{ background-position: -1540px 0 ; }
}
div{
width:140px;
height:140px;
background: url(blog/754767/201606/754767-20160601000042992-1734972084.png) ;
animation:run 1s infinite;
-webkit-animation:run 1s infinite;
animation-fill-mode : backwards;
-webkit-animation-fill-mode : backwards;
}
css动画帧动画效果,CSS3 animation实现逐帧动画效果相关推荐
- html帧动画效果,CSS3 animation实现逐帧动画效果
这篇文章主要介绍了CSS3 animation实现逐帧动画效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被 ...
- html帧动画效果,HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画
本篇文章探讨了HTML5+CSS3从入门到精通之CSS3 animation实现逐帧动画,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入. < css3里面的animatio ...
- CSS3 帧动画分段,CSS3 animation实现逐帧动画效果
css3里面的animation属性非常强大,但是自己用的比较少,最近有次面试就刚好被问到了,趁现在有时间就对animation做一个小总结.同时实现一个逐帧动画的demo作为练习 animation ...
- android 张口逐帧动画,Android中实现一个简单的逐帧动画(附代码下载)
场景 Android中的逐帧动画,就是由连续的一张张照片组成的动画. 效果 注: 实现 首先准备一组不同表情的照片,放在res/drawable下,然后在此目录下新建动画资源文件fairy.xml 这 ...
- html帧动画效果,利用css3-animation实现逐帧动画效果
本文分享了用css3-animation来制作逐帧动画的实现方法,供大家参考,具体内容如下 常见用法: CSS Code复制内容到剪贴板 :hover{ animation:mymove 4s ea ...
- html动画曲线快速结束,CSS3 animation动画
CSS3 animation动画 1.@keyframes 定义关键帧动画 2.animation-name 动画名称 3.animation-duration 动画时间 4.animation-ti ...
- animation之逐帧动画
逐帧动画的本质是让静态图片不断切换,给人视频的感觉 android可以用xml和code 实现逐帧动画 xml实现: 在drawable文件夹下新建anim_live.xml文件内部实现如下: < ...
- 在android中执行多个动画,Android上几种Animation和多个动画同时播放以ScaleAnimation应用详解...
在API Demo的View->Animation下可以找到四个Animation的Demo,第一个3D Translate比较复杂,最后再讲,先讲第2个Interpolator.该Activi ...
- php实现页面雪花效果,CSS3如何实现雪花飘落的效果
通过CSS3中的animation属性来设置动画名称,动画时间.速度以及动画是否循环播放来实现雪花飘落的效果 今天将要分享的是利用CSS3中的animation属性来实现雪花飘落的效果,具有一定的参考 ...
最新文章
- 电压放大倍数公式运放_【专题2:电子工程师 之 硬件】 之 【43.运算放大器详解e 运算放大器虚短和虚断】...
- 微服务架构设计基础之领域驱动设计
- 第78课 通力合作的100个数
- [CSharp]用VSS还是TFS呢?
- 20个Android游戏源码,…
- 风力摆控制系统2015年全国大学生电子设计竞赛B题
- 如何以应届生的身份进入阿里巴巴?
- excel单元格内容拆分_Excel | 单元格内容换行方法
- 按关键字爬取百度图片
- 一个php+ajax的在线匿名聊天室,PHP任意环境都可用,无需复杂配置,移动端电脑端互通流畅,随时随地聊个痛快~
- 半导体物理复习总结(五)——非平衡载流子
- 《特征工程入门与实践》--- 特征学习
- php 微信红包开发代码,PHP 生成微信红包代码简单
- Inet_addr 函数使用报错
- 全产业链模式的竞争优势
- 计算机组成原理——计算机系统的层次结构
- Axure RP9遮罩效果
- Spring组件原理
- 微信小程序篇2 谈谈小程序路由跳转的方式有哪些
- 广州市地铁总公司网络工程方案
热门文章
- 数据分析-----统计学----均值、中位数、众数
- 关于Thymyleaf中下拉菜单几点需要注意的问题
- 大型多人在线游戏开发
- activiti+5.21+mysql_ydl-workflow基于SAAS服务,完美整合springboot + activiti5 + MyBatis
- MySQL的锁到底有多少内容?详细解说
- HarmonyOS从入门到大神资料下载合集
- 【数学建模】数学建模学习1---线性规划(例题+matlab代码实现)
- 0704 - Klib 到底赚了多少钱?
- 解决setInterval函数传参问题
- shuffle FetchFailedException原因