css3动画的研究现状，css3transition动画

其实css3动画的研究现状的问题并不复杂，但是又很多的朋友都不太了解css3transition动画，因此呢，今天小编就来为大家分享css3动画的研究现状的一些知识，希望可以帮助到大家，下面我们一起来看看这个问题的分析吧！

CSS3 的动画的意义何在

让你的页面动画在移动设备上运行更快。这是一个有趣的话题。这也是移动互联网前端工程师关心的问题。

我们都知道JavaScript效率低下的两个主要原因：操作DOM和使用页面动画。浏览器上的动画效果并不比客户端容易。通常情况下，我们会通过频繁的CSS操作来实现视觉动画效果。在DOM和CSS的频繁操作，浏览器将不停止执行重排和重绘，在浏览器的PC版的浏览器，因为可用的内存比较大，用户肉眼是动画网页制作的油漆和回流几乎看不见，所以工程师不用过多考虑性能问题的动画了。但在移动设备上可以有移动设备浏览器的不同分布（内置浏览器）内存不能PC浏览器的内存分配相当的版本，称iPhone Safari的内存只有10M，但一个外国工程师事实上，iPhone 3GS被分配到他旅行的记忆只有6m。

而Android是分配给浏览器的内存更是不确定的，无论是iPhone或Android或WindowPhone上或黑莓，没有官方的文件说，系统自带的浏览器占据了大部分的记忆，所以上述存储器中的数据是不确定的。目前，对CSS3的最佳支持Webkit的浏览器。在WebKit内核浏览器，苹果的Safari和谷歌的Chrome浏览器应该黑莓。

前端工程师知道CSS3提供了大量的新功能，包括二维、三维动画的特点，在这讨论的其他特点，我们讨论了目前的CSS3动画的意义。

使用CSS3动画：不占用js主线程；可以利用硬件加速；浏览器可以优化动画（不是在元素可见的时候，而不是动画，并减少对FPS的影响）。

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动画效果影响网站seo吗

一般不会，搜索引擎蜘蛛可以抓取并且识别分析CSS，你应该从这个动画是否有利于用户体验考虑。

如果单纯只是为了网站美观去做的动画，对SEO起不到太高的效果，也有可能会带来不利的影响。

如果可以使得用户更加清晰了解你表达的主题，或者可以突出重要链接，节省用户查找时间，那才是最好的。

如果你还想了解更多这方面的信息，记得收藏关注本站。