CSS3中怎么控制HTML元素动画效果-创新互联
这篇文章将为大家详细讲解有关CSS3中怎么控制HTML元素动画效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
1.对元素transform的控制
代码如下:
CSS3中,元素可以具有如下的transform-control属性:
-webkit-transform: translate(3em,0); -webkit-transform: rotate(30deg); -webkit-transform: scale(1.5);
通过恰当的变换,最终可以将元素的位置变化成为我们需要的效果。
2.CSS3的动画属性
CSS3中元素的所有均由下面的属性控制
代码如下:
-webkit-transition: 1s ease-in-out;
实际上,这个css属性控制了在元素的style发生变化的时候应该怎样改变那些数值,一些可以连续变化的style,诸如opacity,color,width等等都可以在这样的属性控制下进行动画
3.动画的多时间点控制
我们可以逐点控制动画,放上另一个例子:
代码如下: