css3 @keyframes 动画规则学习
来源:互联网 发布:哈尔滨蓝网网络直播 编辑:程序博客网 时间:2024/05/17 17:17
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果.
实例
@keyframes myfirst{from {background: red;}to {background: yellow;}}@-moz-keyframes myfirst /* Firefox */{from {background: red;}to {background: yellow;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{from {background: red;}to {background: yellow;}}@-o-keyframes myfirst /* Opera */{from {background: red;}to {background: yellow;}}
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div{animation: myfirst 5s;-moz-animation: myfirst 5s;/* Firefox */-webkit-animation: myfirst 5s;/* Safari 和 Chrome */-o-animation: myfirst 5s;/* Opera */}
什么是 CSS3 中的动画?
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
@keyframes myfirst{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}@-moz-keyframes myfirst /* Firefox */{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}@-webkit-keyframes myfirst /* Safari 和 Chrome */{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}@-o-keyframes myfirst /* Opera */{0% {background: red;}25% {background: yellow;}50% {background: blue;}100% {background: green;}}
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:
animation
div{animation-name: myfirst;animation-duration: 5s;animation-timing-function: linear;animation-delay: 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;}
div{animation: myfirst 5s linear 2s infinite alternate;/* Firefox: */-moz-animation: myfirst 5s linear 2s infinite alternate;/* Safari 和 Chrome: */-webkit-animation: myfirst 5s linear 2s infinite alternate;/* Opera: */-o-animation: myfirst 5s linear 2s infinite alternate;}
阅读全文
1 0
- css3 @keyframes 动画规则学习
- CSS3 @keyframes动画规则
- CSS3 @keyframes 规则
- CSS3中@keyframes规则
- CSS3 @keyframes 规则
- CSS3动画animation相关属性与关键帧规则keyframes
- CSS3动画——@keyframes规则和animation属性
- CSS3动画 @keyframes
- CSS3 animation,@keyframes 动画
- CSS3 动画@keyframes
- CSS3动画——Keyframes
- CSS3的动画效果@keyframes
- CSS3 animation 属性 CSS3 @keyframes 规则
- 【css3】CSS3动画(animation @keyframes)
- CSS3 animation属性 与 @keyframes规则
- 详解css3系列:动画@keyframes和Animation
- 详解css3系列:动画@keyframes和Animation
- CSS3动画--keyframes,transform,animation,transition
- activiti画图保存再打开,线条位置乱跑
- Android Intent匹配规则
- 集合按元素指定属性排序_comparable,Comparator
- [插头DP] BZOJ2331 && SCOI2011 地板
- JAVA单点登录
- css3 @keyframes 动画规则学习
- mongodb实战教程 漠北带你入门到精通
- SQL语法学习
- H5开发:H5视屏播放
- java POI实现向Excel中插入图片
- 教你最简单那的pdf转cad的操作
- laravel笔记-Eloquent ORM(杂项)
- springMvc--接受请求参数
- android 7.0安装APK崩溃