CSS3动画简单应用
来源:互联网 发布:雾月政变 知乎 编辑:程序博客网 时间:2024/05/29 18:06
CSS3中的动画之前接触过,实际项目中并没用过,因为做的动画大多都要计算一些变量,又没有用less等预处理语言,所以基本上都是用js写的动画。今天又回顾了一下CSS3动画,感觉还是有些场景可以用到的,方便自己回看记忆,写下CSS3动画的简单用法。
首先我们要先声明动画,写法如下:
@keyframes change{ 0%{ background:#fff; margin-left:10px; } 25%{ background:#f00; margin-left:25px; } 50%{ transform:rotate(720deg); } 100%{ background:#00f; margin-left:100px; }}change为动画的名称,我们用百分号来表示这个动画的进程,即到25%时动画过渡到什么样子,到50%时过渡到什么样子,可以根据自己的需求来进行定义。当然考虑到浏览器的兼容性,我们可以加上一些前缀,比如:
谷歌的Chrome浏览器和苹果的Safari浏览器
@-webkit-keyframes change{ 0%{ background:#fff; margin-left:10px; } 25%{ background:#f00; margin-left:250px; } 50%{ transform:rotate(720deg); } 100%{ background:#00f; margin-left:800px; }}Opera欧朋浏览器
@-o-keyframes change{ 0%{ background:#fff; margin-left:10px; } 25%{ background:#f00; margin-left:25px; } 50%{ transform:rotate(720deg); } 100%{ background:#00f; margin-left:100px; }}Firefox火狐浏览器
@-moz-keyframes change{ 0%{ background:#fff; margin-left:10px; } 25%{ background:#f00; margin-left:250px; } 50%{ transform:rotate(720deg); } 100%{ background:#00f; margin-left:800px; }}这样就可以兼容一些主流的浏览器了。
定义好动画之后,我们只要在样式文件中给元素加上这个动画样式就可以了,如下:
animation-name:change;animation-duration:5s;animation-timing-function:linear;animation-delay:0s;animation-iteration-count:infinite;animation-direction:alternate;上面代码中,对应含义如下:
animation-name 要引用的动画名称
animation-duration 动画持续的时长
animation-timing-function 动画的速度曲线
animation-delay 动画的延迟执行时间
animation-iteration-count 动画执行的次数
animation-direction 动画是否在下一周期逆向播放
另外还有几个属性可以定义:
animation-play-state 规定动画是在运行还是停止状态
animation-fill-mode 规定动画执行完之后的状态
这样样式的属性也可以合起来写成animation属性,如下:
animation:change 5s linear 0s infinite alternate;
这样我们就可以用CSS3的animation写出简单流畅的动画了。
兼容性如下:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
- CSS3动画简单应用
- css3 animation 动画应用
- HTML5/CSS3动画应用
- Css3的动画应用
- CSS3 简单动画效果
- CSS3制作简单动画
- CSS3动画理解与应用
- SVG+CSS3 简单线条动画
- 简单css3动画效果练习
- CSS3动画属性简单介绍
- CSS3中SVG简单应用
- HTML5和CSS3的动画应用
- css3实现带有简单动画按钮导航
- css3简单动画之火箭快跑
- 一个简单的CSS3重复动画
- H5+CSS3简单动画 知识点 汇总
- css3 一些简单的动画使用方法
- H5+CSS3实现简单菜单下划线动画
- hdu 1503 Advanced Fruits
- arm-linux的gdb移植
- 摇一摇开发的关键性代码
- iOS CoreAnimation-粒子动画
- 嵌入式开发中对db2 null字段的处理
- CSS3动画简单应用
- C#结构
- ajax报:The URI scheme corresponds to an unknown protocol handler
- Android 手机信号强度
- arm-linux内存页表创建
- rapidxml SAX解析支持
- 苹果奖学金获得者感言
- 动态规划解决硬币问题
- jsp中文乱码 网页乱码 插入mysql中文乱码