CSS3动画第二篇

CSS3 过渡

transition 呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition-property  过渡或动态模拟的 CSS 属性

它所指就是我们更改的属性如（width、height、background-color属性等）

all：指所有元素，一般为了方便都会使用all

transition-duration  完成过渡所需要的时间

单位为秒（ s ）

transition-timing-function  指定过渡函数

         linear     规定以相同速度开始至结束的过渡效果

          ease       规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）

      ease-in     规定以慢速开始的过渡效果

    ease-out     规定以慢速结束的过渡效果

ease-in-out     规定以慢速开始和结束的过渡效果

transition-delay   过渡开始出现的延迟时间

单位为秒（ s ）他是分正负值，正（到了规定时间触发）负（会反过来显示效果）

0：默认值，元素过渡效果立即执行

animation动画简介

以前使用Flash动画的关键帧来声明一个动画，现在已经不兼容，取而代之的是：

@keyframes 动画名 {

   0% {width:0;}

   33% {width:23px;}

   66% {width:46px;}

   100% {width:69px;}

}

写兼容的时候浏览器前缀是放在 @keyframes 中间

例如：@-webkit-keyframes（谷歌）、@-moz- keyframes（火狐）,@-0-

调用关键帧 animation（复合属性）

animation-name 由@keyframes创建的动画名称

animation–duration 过渡时间 单位为秒（ s ）

animation-timing-function 过渡方式（linear ，ease，ease）

animation-delay  延迟时间 单位为秒（ s ）

animation-iteration-count 动画的播放次数（infinite 循环播放）

animation-direction  动画的播放方向「normal(循环向前)，alternate（偶数次向前播放）」

animation:调用关键帧animation: spread 2s linear 1s infinite alternate;

科普一个网站 Animate.css | A cross-browser library of CSS animations.动画特效网站

在我们日常中可以直接复制他的特效，具体使用方法如图：

第一种写法：在动画特效网下拉就可以找到如图复制。

哪还有一种情况我不想复制他的我想直接使用哪就用到我们所学的animation

第二种写法如下：

🏁注意点是他也是要引入link!!!

第三种写法：

复制上图link的网址，下载保存，我们建立一个css文件夹来储存，在我们使用时我们可以用外部引用link来使用如图：