【css3】CSS3动画(animation @keyframes)
来源:互联网 发布:元朝等级制度 知乎 编辑:程序博客网 时间:2024/05/18 02:41
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。在讲解利用@keyframes做动画之前,我们先来看一个例子,即在一定时间内,将正方形进行移动,效果如下:
这里先附上代码,后面再来解释:
<!DOCTYPE html><html><head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:50px; left:50px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:150px; left:150px; background:green;} 100% {top:200px; left:200px; background:red;} } @-moz-keyframes mymove /* Firefox */ { 0% {top:0px; left:0px; background:red;} 25% {top:50px; left:50px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:150px; left:150px; background:green;} 100% {top:200px; left:200px; background:red;} } @-webkit-keyframes mymove /* Safari and Chrome */ { 0% {top:0px; left:0px; background:red;} 25% {top:50px; left:50px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:150px; left:150px; background:green;} 100% {top:200px; left:200px; background:red;} } @-o-keyframes mymove /* Opera */ { 0% {top:0px; left:0px; background:red;} 25% {top:50px; left:50px; background:blue;} 50% {top:100px; left:100px; background:yellow;} 75% {top:150px; left:150px; background:green;} 100% {top:200px; left:200px; background:red;} } </style></head><body><div></div></body></html>
1、定义和用法通过 @keyframes 规则,您能够创建动画。
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
2、浏览器兼容情况
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
3、CSS3动画以及语法当我们在@keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
代码如下:
<!DOCTYPE html><html><head> <style> div { width:100px; height:100px; background:red; position:relative; animation:mymove 10s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safari and Chrome */ -o-animation:mymove 5s infinite; /* Opera */ } @keyframes mymove { 0% {top:0px;} 25% {top:100px;} 50% {top:200px;} 75% {top:300px;} 100% {top:400px;} } </style></head><body><div></div></body></html>
说明:
名字为mymove
的@keyframes
,动画完成需要的总时长为10s
,刚开始的时候图片距顶部距离为0px
,2.5s
后图片距顶部距离为100px
,5s
后图片距顶部的距离为200px
,以此类推。
to和from可以相当于上面的0%和100%,一定要记得这里写0是无效的,要写0%。0% 是动画的开始,100% 是动画的完成。但是为了得到最佳的浏览器支持,建议始终定义 0% 和 100% 选择器。
在@keyframes
也可以组合样式,比如:
@keyframes mymove{0% {top:0px; left:0px; background:red;}25% {top:0px; left:100px; background:blue;}50% {top:100px; left:100px; background:yellow;}75% {top:100px; left:0px; background:green;}100% {top:0px; left:0px; background:red;}4、利用@keyframes制作轮播图
效果如下:
代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; text-decoration: none; } ul{ list-style: none; } #container{ position: relative; width: 300px; height: 200px; overflow: hidden;/*隐藏溢出的图片*/ } .pic{ width:1200px;/*4张图的宽度*/ position: absolute;/*基于父容器进行定位*/ left:0; animation-name: focusmap; animation-duration: 5s; animation-iteration-count: infinite;//动画调用可以简写 } @keyframes focusmap { 0%,30%{ left: 0; } 35%,65%{ left: -300px; } 70%,99%{ left: -600px; } 100%{ left: -900px; } } .pic li{ float: left; background: #5dd94e; } .pic li img { width: 300px; height: 200px; } </style></head><body><div id="container"> <ul class="pic"> <li><a href="javascript:;"><img src="images/1.png" alt="pic1"></a></li> <li><a href="javascript:;"><img src="images/2.png" alt="pic2"></a></li> <li><a href="javascript:;"><img src="images/3.png" alt="pic3"></a></li> <li><a href="javascript:;"><img src="images/1.png" alt="pic1"></a></li><!-- 克隆第一张 --> </ul></div></body></html>
- 【css3】CSS3动画(animation @keyframes)
- CSS3 animation,@keyframes 动画
- 详解css3系列:动画@keyframes和Animation
- 详解css3系列:动画@keyframes和Animation
- CSS3动画--keyframes,transform,animation,transition
- 详解css3系列:动画@keyframes和Animation
- 详解css3系列:动画@keyframes和Animation
- CSS3动画 @keyframes
- CSS3 @keyframes动画规则
- CSS3 动画@keyframes
- CSS3动画animation相关属性与关键帧规则keyframes
- CSS3动画——@keyframes规则和animation属性
- css3动画的使用(@keyframes)
- CSS3 关键帧动画(@keyframes)
- CSS3 animation 属性 CSS3 @keyframes 规则
- CSS3动画——Keyframes
- CSS3的动画效果@keyframes
- css3 @keyframes 动画规则学习
- 相对路径&绝对路径&类路径
- tensorflow-softmax回归及交叉熵函数
- 17个将被互联网颠覆的传统行业总盘点
- PC端手机端自适应
- 【范数】常用参考汇集
- 【css3】CSS3动画(animation @keyframes)
- TCP连接的建立与断开
- 源码分析AisenWeiBo
- poj3414 倒水问题
- angular的自定义五种服务
- 九大排序算法总结
- ubuntu1704入门教程(一)下载安装
- 重温数据结构:深入理解红黑树
- Servlet笔记——(1.4.1)Http协议概念