css3中animation动画属性如何使用

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了css3中animation动画属性如何使用，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3050字，纯文字阅读大概需要5分钟。

内容图文

css3中animation动画共有六个属性分别是动画名称，完成动画所需时间，速度，延迟，播放速度以及是否有反向播放，本篇文章将和大家详细分享有关css3中animation动画属性的方法，有一定的参考价值，希望对大家有所帮助。

CSS主要是用于描绘网页的样式和布局而CSS3 是最新的 CSS 标准，提供了更多的方法而且使用CSS3，可以创建动画，使网页内容更加丰富今天将和大家分享css3中的动画属性——animation

注意在使用过程中浏览器兼容问题

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持 -webkit-animation 属性

所以在写程序的过程中应考虑到浏览器兼容问题

animation 属性

用于设置六个动画属性：

（1）animation-name：规定动画的名称。

animation-name:demo//Internet Explorer 10、Firefox 以及 Opera 浏览器中
-webkit-animation-name:demo//Safari 和 Chrome

（2）animation-duration：完成动画所花费的时间（以秒和毫秒为单位）

animation-duration：3s；
-webkit-animation-duration:3s;

（3）animation-timing-function：动画速度曲线

linear ：以匀速播放

ease ：刚开始动画速度慢然后加快在结束时变慢 （默认）

ease-in ：指动画以低速开始

ease-out ：指动画以低速结束。

ease-in-out ：动画以低速开始和结束

cubic-bezier(n,n,n,n) ：在 cubic-bezier 函数中设置想要的值，是从 0 到 1 的数值

animation-timing-function：ease；
-webkit-animation-timing-function:ease;

（4）animation-delay：动画开始延迟时间

animation-delay：3s；
-webkit-animation-delay:3s;

（5）animation-iteration-count：动画播放的次数

n: 自定义动画播放次数的数值

infinite ：指动画无限次循环播放

animation-iteration-count：4；//循环四次
-webkit-animation-iteration-count:infinite;//循环无数次

（6）animation-direction：动画是否轮流反向播放

normal 动画应该正常播放 （默认）

alternate 动画应该轮流反向播放

animation-direction：normal;
-webkit-animation-direction:alternate;

让一个小方块按照右下左上的方向进行运动

div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:demo;
animation-iteration-count：infinite;
animation-duration:2s;
animation-timing-function:ease;
animation-delay:0.1s;
animation-direction: alternate; 
｝
/* Safari and Chrome 浏览器*/
-webkit-animation:demo;/*设置动画名称*/
-webkit-animation-iteration-count：infinite;/*动画执行次数*/
-webkit-animation-duration:5s;/*动画花费时间*/
-webkit-animation-timing-function:ease;/*动画速度*/
-webkit-animation-delay:2s;/*动画延迟*/
-webkit-animation-direction: alternate; /*动画是否反向*/
}
/*设置动画运行区域*/
@keyframes demo
{
	0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
/*Safari and Chrome浏览器*/
@-webkit-keyframes demo
{
    0% {background-color: pink;left:0;top:40px;}
	25%{background-color: hotpink;left:300px;top:40px;}
	50%{background-color: yellow;left:300px;top:340px;}
	75%{background-color: blue;left:0;top:340px;}
	100%{background-color: green;left:0;top:30px;}
}
</style>

效果图：

总结：以上就是本篇文章的内容了，希望大家通过本篇文章能对CSS3中的animation有所了解

以上就是css3中animation动画属性如何使用的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的css3中animation动画属性如何使用全部内容，希望文章能够帮你解决css3中animation动画属性如何使用所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---