css3中animation的应用
2016-01-06 16:05
681 查看
1、css3 的相关属性:
相关代码:
运动的参数(百分比表示运动的进度)
相关代码:
div { animation-name: myfirst; //动画的名称 animation-duration: 5s; //动画一个周期需要5秒 animation-timing-function: linear; //动画运动速度的曲线动画从头到尾的速度是相同的。 animation-delay: 2s; //等待2s动画才开始 animation-iteration-count: infinite;//动画一直在持续,无数次 animation-direction: alternate;//动画结束后再反向循环 animation-play-state: running;//规定动画是在运行 /* Firefox: */ -moz-animation-name: myfirst; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Safari 和 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Opera: */ -o-animation-name: myfirst; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; }
运动的参数(百分比表示运动的进度)
@keyframes myfirst { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
相关文章推荐
- css3-盒子模型的应用
- CSS基础之选择器
- CSS代码重构与优化之路
- CSS基础之简介
- div+css布局中积累的经验之一
- CSS3圆角和渐变2种常用功能详解
- 【CSS3】阴影 box-shadow(二)
- 纯CSS+HTML自定义checkbox效果[转]
- ListView 添加长度样式不固定的分割线
- css记录关于文本对齐问题
- css3-盒子模型之外边距
- Extjs如何自定义panel header样式?
- css3-盒子模型之边框
- CSS的几种选择器
- css相关记录-background
- CSS3第二日--圆角边框
- [css3]叉叉旋转效果
- js+css:43种常见的浏览器兼容性问题大汇总
- PHP动态压缩js,css
- WebStorm设置左侧菜单栏背景色和样式