最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3动态效果学习笔记
时间:2014-09-24 编辑:简简单单 来源:一聚教程网
@keyframe 规定动画
一般是跟animation一起用
animation : 规定动画的名字 规定动画的时间 规定动画的速度曲线。
@keyframe 定义动画的名称{ 动画时长的百分比。{一个或多个合法的 CSS 样式属性} }
目前大部分浏览器都没有支持@keyframe 和animation;所以要分浏览器书写
@keyframe
1.safari和chrome浏览器
@-webkit-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
2.Firefox浏览器
@-moz-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
3.Opera浏览器
@-o-keyframes myfrom{
from {top:0;}
to {top:200px;}
}
animation
1.safari和chrome浏览器
@-webkit-animation : myfrom 5s infinite
2.Firefox浏览器
@-moz-animation : myfrom 5s infinite
2.Opera浏览器
@-o-animation : myfrom 5s infinite
例子
代码如下 | 复制代码 |
word" content="CSS3动态效果demo"> animation 动画属性 @keyframes: 规定动画 源代码 animation-delay: 规定动画何时开始 源代码 animation-iteration-count: 规定动画次数 源代码 animation-direction: 规定下次动画逆向 源代码 源代码 源代码 源代码 源代码 <textarea readonly="readonly" class="tip" style="border-bottom:1px solid #000;"><div class="cont1 conns">animation-delay:规定动画何时开始 </div> |
-
上一个: CSS提高渲染性能实现方法
-
下一个: CSS中样式覆盖优先顺序详解
相关文章
- CSS 鼠标点击拖拽效果代码展示 10-31
- CSS使用SVG实现动态分布的圆环发散路径动画教程 10-31
- css3中仿放大镜效果的几种方式原理介绍 10-26
- CSS3切割轮播图的代码展示 10-26
- CSS组合选择器解析 10-26
- css带搜索导航栏的代码展示 10-26