Web前端开发——CSS3之过渡与动画

目录

1. 内容

2. 过渡transition 

2.1 基本用法

2.2 案例

3. animation动画

3.1 内容

3.2 案例

3.2.1 案例1

3.2.2 案例2

---

1. 内容

2. 过渡transition 

2.1 基本用法

•  prooerty的属性名如果只有一个直接写上该属性名即可，若是多个属性，则属性名之间用逗号隔开，如果是所有属性，则用all表示；
• duration持续时间可以是秒或毫秒为单位；
• timing-function属性比较常用，表示变化过程是以快慢快还是线慢快的方式，具体的方式见下表：

2.2 案例

• div内定义黑色的文字和灰色的背景为基本状态，transiton定义所有属性变化的值来完成过渡；
• div.hover内定义了白色和绿色的背景作为最终的状态

3. animation动画

3.1 内容

keyframes翻译过来称关键帧，动画效果是由很多幅静态的图片连续播放形成的，由于人眼的延迟会自动的将这些图片连接在一起，从而形成动态的动画效果，所以在定义动画的时候也是粗当于这些静态的图片摆放进去，每幅静态图片我们都称为是一个keyframes，所以这个规则定义出来的就是所有关键帧，动画定义好之后就可以用animation属性进行调用，animation属性取值见下表：

• animation可以将几个属性值统一简写在一起：name duration timing-function
• name必须为使用@keyframes定义的动画的名字；
• duration与timing-function与transition完全一样；
• play-state表示当前的动画播放状态

3.2 案例

3.2.1 案例1

• 这是一个鼠标放在div盒子时颜色会发生变化动画，由上述代码可以看到：
• 首先我们需要用@keyframes定义动画的名字，这个名字为mycolor；
• 其次用百分号来表示播放的进度的变化；
• 最后用animation属性引用定义好的动画；

3.2.2 案例2

    
    


    
linear
    
ease
    
ease-in
    
ease-out
    
ease-in-out