最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
CSS3动态效果学习笔记
时间:2022-06-25 13:43:39 编辑:袖梨 来源:一聚教程网
@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> |
相关文章
- 无畏契约手游獠犬武器怎么样 源能行动獠犬性能详解 07-10
- 胜利女神新的希望A2怎么玩 A2技能机制详细解析 07-10
- 《QQ》群主转让给管理员方法 07-10
- swap的价格和价值 07-10
- 为什么有些微信公众号能拿下数千万的风投你却不行? 07-10
- 剑星蝴蝶拍照位置在哪-剑星蝴蝶拍照地点 07-10