CSS3 变形与动画

1. 旋转 rotate(45deg)

参数单位:  角度deg

2. 扭曲 skew(20deg, 30deg)

第一个参数：表示水平方向，
第二个参数：标书垂直方向

3. 缩放 scale(0.5, 0.5),

第一个参数：表示水平方向的缩放
第二个参数：表示垂直方向的缩放
注：值在0~1之间表示缩放 大于1表示放大

4. 位移：translate(100px, 100px)

第一个参数：表示水平方向的位移
第二个参数：表示垂直方向的位移
注：位移并不会影响布局

5. 原点：transform-origin(0, 100%)

默认情况下：CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
第一个参数：表示水平方向的参考点
第二个参数：表示垂直方向的参考点

6 .过度：transition: background-color .5s ease .1s;

transition 为组合属性，包含以下四个属性
1. transition-property: 指定过度 或 动态模拟的css属性
2. transition-duration: 指定完成过度所需要的时间
3. transition-timing-function：指定过度函数

• ease : 默认值; 由快到慢，逐渐变慢
• linear : 恒速
• ease-in : 加速, 渐显效果
• ease-out : 减速, 渐隐效果

• ease-in-out : 先加速后减速, 渐显渐隐效果

  1. transition-delay: 开始出现的延时时间

动画-关键帧

1. 定义关键帧 keyframse

@keyframes demo{
    0%{
        background-color: gray;
    }
    100%{
        background-color: black;
    }
}

2. 调用关键帧动画 animation

div:hover{
    animation: demo 3s ease .1s;  
}

animation 包含四个属性

2.1 设置播放动画名

 animation-name: 动画名;

2.2 设置动画的播放时间

animation-duration: 3s;

2.3 设置动画的播放方式

animation-timing-function: ease;

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

2.4 设置动画播放前等待时间

animation-delay: 3s;  执行动画等待时间

2.5 设置动画播放的次数

animation-iteration-count: 5;

• 默认值: 1
• infinite: 表示无限次循环

2.6 设置动画播放方向

animation-direction: normal;

• normal: 默认值; 表示每次都向前播放
• alternate : 动画播放在第偶数次向前播放，第奇数次向反方向播放。

2.7 设置动画的播放状态

animation-play-state: running;

• 默认值： running,
• paused : 将播放的动画暂停下来， 暂停之后， 元素的样式会回到原始设置状态