CSS简单动画效果

一、注意事项：

1. 如需学习css动画，必须先掌握@keyframes的规则，在@keyframes 中规定某项Css样式，就能创建由当前样式逐渐该为新样式的动画效果

2. 在使用@keyframes规则时，需要注意浏览器的兼容性问题，不同浏览器兼容性不同：

Internet Explorer 10、Firefox以及支持@keyframes规则和animation属性

Chrome和Sagari需要前缀-Webkit-

二、选择器

1. 当在@keyframes中创建动画时，需要将它捆绑到某个选择器，否则不会产生动画效果

2 通过至少规定以下两个动画属性，就可以将动画绑定到选择器.：

• 规定动画的名称
• 规定动画的时长

例如：把名为first 时长为5s的动画捆绑到div元素上：

 

 

3.在设置动画变化所发生的时间时：可以使用”from“和”to“，当然也可以使用 0%和 100%

0%代表动画开始 100%代表动画结束

 

例如：将div从开始的位置移动到向左外边距为100px的位置：

 

和上面的动画效果一样，但动画法伤时间使用的是 “fron” 和“to”

在上面动画效果的基础上，还可以细分时间段，产生更多的动画效果，例如

 

转载于:https://www.cnblogs.com/Hubert-dzl/p/11060745.html