Shulou(Shulou.com)06/02 Report--

这篇文章主要介绍"css3设置动画的相关属性有哪些"，在日常操作中，相信很多人在css3设置动画的相关属性有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"css3设置动画的相关属性有哪些"的疑惑有所帮助!接下来，请跟着小编一起来学习吧!

css3设置动画的4个相关属性：1、transform属性，用于向元素应用2D或3D转换;2、transition属性，用于实现过渡效果;3、animation属性，用于给元素绑定动画;4、"@keyframes"，定义动画一个周期的行为。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3动画的属性总的来说只有transform(变形)，transition(过渡)，和animation(动画)这三种。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

transition 属性是一个简写属性，用于设置四个过渡属性：

transition-property

transition-duration

transition-timing-function

transition-delay

animation 属性是一个简写属性，用于设置六个动画属性：

animation-name

animation-duration

animation-timing-function

animation-delay

animation-iteration-count

animation-direction

animation 属性需要和@keyframes规则一起使用，才可创建动画。

@keyframes 规则

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

div { width: 100px; height: 100px; background: red; position: relative; animation: mymove 5s infinite; -webkit-animation: mymove 5s infinite; /* Safari and Chrome */ } @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; } } @-webkit-keyframes mymove /* Safari and Chrome */ { 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; } }

At this point, the study of "what are the related attributes of css3 animation" is over, hoping to solve everyone's doubts. Theory and practice can better match to help everyone learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.