CSS3为网页动画的设计带来了新的可能性,新增加了一些用来实现动画的属性。下面就来看看CSS3新增加的一些用来实现动画的属性。
.animate { animation-name: myanimation; animation-duration: 2s; animation-delay: 1s; animation-iteration-count: infinite; animation-direction: alternate; animation-timing-function: ease-in-out; } @keyfames myanimation { 0% { transform: translateY(0); } 50% { transform: translateY(50px); } 100% { transform: translateY(0); } }
animation-name:用来指定动画的名称。
animation-duration:用来指定动画的持续时间。
animation-delay:用来指定动画的延迟时间。
animation-iteration-count:用来指定动画的执行次数。
animation-direction:用来指定动画的方向(正向或反向)。
animation-timing-function:用来指定动画的时间曲线。
@keyframes:用来定义动画的关键帧。
transform:用来指定元素变形的效果。
除了以上属性,CSS3还新增加了一些过渡(transition)属性,让动画变得更加平滑,例如:
.transition { transition-property: all; transition-duration: 2s; transition-delay: 1s; transition-timing-function: ease-in-out; }
transition-property:用来指定哪些CSS属性会被过渡。
transition-duration:用来指定过渡效果持续的时间。
transition-delay:用来指定过渡效果的延迟时间。
transition-timing-function:用来指定过渡效果的时间曲线。
通过这些新增加的属性,我们可以在CSS中实现更加绚丽多彩的动画效果,让网页变得更加生动有趣。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。