css3动画用什么定制规则(css3动画运用什么规则)
各位老铁们，大家好，今天由我来为大家分享css3动画用什么定制规则，以及css3动画运用什么规则的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
css3里面动画有没有用过动画的属性有哪些具体是什么
CSS3动画属性
下面的表格列出了@keyframes规则和所有动画属性：
@keyframes规定动画。
animation所有动画属性的简写属性，除了 animation-play-state属性。
animation-name规定@keyframes动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function规定动画的速度曲线。默认是"ease"。 3
animation-delay规定动画何时开始。默认是 0。 3
animation-iteration-count规定动画被播放的次数。默认是 1。
animation-direction规定动画是否在下一周期逆向地播放。默认是"normal"。
animation-play-state规定动画是否正在运行或暂停。默认是"running"。
animation-fill-mode规定对象动画时间之外的状态。
下面的两个例子设置了所有动画属性：
实例
运行名为 myfirst的动画，其中设置了所有动画属性：
div
{
animation-name: myfirst;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* Firefox:*/
-moz-animation-name: myfirst;
-moz-animation-duration: 5s;
-moz-animation-timing-function: linear;
-moz-animation-delay: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-play-state: running;
/* Safari和 Chrome:*/
-webkit-animation-name: myfirst;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
/* Opera:*/
-o-animation-name: myfirst;
-o-animation-duration: 5s;
-o-animation-timing-function: linear;
-o-animation-delay: 2s;
-o-animation-iteration-count: infinite;
-o-animation-direction: alternate;
-o-animation-play-state: running;
}
CSS3动画和js动画各有什么优劣
CSS3的动画的优点：
1.在性能上会稍微好一些，浏览器会对CSS3的动画做一些优化（比如专门新建一个图层用来跑动画）
2.代码相对简单
但其缺点也很明显：
1.在动画控制上不够灵活
2.兼容性不好
3.部分动画功能无法实现（如滚动动画，视差滚动等）
JavaScript的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容IE6，并且功能强大。但想想CSS动画的transform矩阵是C++级的计算，必然要比javascript级的计算要快。另外对库的依赖也是一个很让人头疼的问题。
所以，对于一些复杂控制的动画，使用javascript会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑CSS吧。
css3动画播放后如何停止在最后的状态
新建keyframes元素，命名为myFirst。设置百分比，编写Animation属性对属性值的引用。为了开考虑兼容性问题，可以多写几个备选，详细步骤：
1、首先，准备好HTML前期工作以及对DIV的一个简单设置。
2、然后，新建keyframes元素，命名为myFirst。
3、然后，可以在设置百分比，不仅仅只能设置4个，大家可以根据需求设置。
4、这时候，可以为他写上各种百分比的颜色。
5、此时，就能编写Animation属性对属性值的引用。
6、为了开考虑兼容性问题，可以多写几个备选。
关于本次css3动画用什么定制规则和css3动画运用什么规则的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。