CSS动画特效demo

今天记录一个网站,是之前用过,也一直很喜欢的网站,主要是使用一些CSS2和CSS3来做的一些动效。除了直接引用这个CSS文件之外,还可以只是将需要的class和动画代码引入自己的样式表中。请一定记住这个链接:

https://daneden.github.io/animate.css/

上面有animate.css文件可以下载,直接link入网页中当然省事儿,如果只需要部分动画,或者简单的一些动画的话,完全可以提取出其中动画的代码,因为这里还是主要用的CSS3的特效,所以可以按照CSS3动画的方式,提取出该动画对应的代码加入到自己的CSS样式表中即可。

这里对CSS3动画简单介绍一下。通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

CSS3 @keyframes 规则

如需在 CSS3 中创建动画,首先需要学习 @keyframes 规则。

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。

各种浏览器对CSS3@keyframes规则的支持情况:

  • Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
  • Chrome 和 Safari 需要前缀 -webkit-。
  • Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
 创建CSS3动画

在 @keyframes 中创建动画时,要把它捆绑到某个选择器,否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:

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

例如,定义如下的@keyframes:

上面的动画是将待绑定的元素的背景色熊红色变成黄色。接着将上述的动画animationTest绑定到一个div上:

上面绑定动画时设置动画完成周期为5秒,一定要设置动画时间,不然动画将不会出现,因为默认的时间是0秒。

CSS3动画属性

所谓动画是使元素从一种样式逐渐变化为另一种样式的效果。通过在设置的时间内改变不同的属性,就可以实现不同的动画。CSS3@keyframes规则和动画属性如下表所示:

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

再回到文章顶部的链接:

https://daneden.github.io/animate.css/

直接引用其中的动画代码,就不需要设置自己再思考@keyframes规则,只需要绑定到需要执行动画的元素上即可。

《CSS动画特效demo》有1个想法

  1. Undeniably imagine that which you said. Your favorite reason seemed to be at the web the simplest thing to bear in mind of. I say to you, I certainly get annoyed while people consider concerns that they just do not recognize about. You managed to hit the nail upon the highest and outlined out the entire thing without having side-effects , people can take a signal. Will probably be back to get more. Thank you

发表评论

电子邮件地址不会被公开。 必填项已用*标注