animation的八大属性及HTML基础动画效果——平移、旋转、缩放、倾斜、过渡

1.动画（animation）的8个属性及 关键帧

animation：复合属性，设置对象的动画属性，共有8个属性

1.1 animation-name

作用：设置对象所应用的动画名称
书写格式：@keyframes 动画名称

 .box{
    
    
        margin: auto;
        width: 200px;
        height: 600px;
        padding-top: 150px;
        transform-style: preserve-3d;
        animation: flesh 5s 10;
    }
    @keyframes flesh{
    
    
        form{
    
    
            transform: rotateX(0) rotateY(0);
        }
        to{
    
    
            transform: rotatey(360deg) rotatex(45deg);
        }
    }

1.2 animation-duration

animation-duration主要用来设置动画的持续时间

1.3 transition-timing-function

transition-timing-function属性用来设置动画的过渡类型，它的常用取值如下：

• linear：线性过渡
• ease：平滑过渡
• ease-in：由慢到快
• ease-out：由快到慢
• ease-in-out：由慢到快再到慢

1.4 animation-delay

animation-delay属性设置动画的延迟时间，一般属性常用取值取数字

1.5 animation-iteration-count

animation-iteration-count 属性设置动画的循环次数
属性取值：

• infinite：无限循环
• number: 循环的次数

1.6 animation-direction

animation-direction属性设置动画是否反向运动
常用属性取值如下：

• normal：正方向运行
• reverse：反方向运行
• alternate：动画先正常运行再反方向运行，并持续交替运行
• alternate-reverse：动画先反运行再正方向运行，并持续交替运行

1.7 animation-play-state

animation-play-state属性设置动画的状态
常用取值：

• running:运动
• paused: 暂停

1.8 animation-fill-mode

animation-fill-mode属性设置动画时间之外的状态
常用取值：

• none:默认值，不设置对象动画之外的状态
• forwards:设置对象状态为动画结束时的状态
• backwards:设置对象状态为动画开始时的状态
• both:设置对象状态为动画开始或结束时的状态

1.9关键帧

• 可用from to
• 百分比直接定义

2.变换元素的位置——平移

• transform属性取值为translate（x，y）时，表示元素的平移。
• 属性取值：数值、百分比，x轴取负值表示向左移动，y轴取负值表示向上移动

@keyframes flesh{
    
    
        from{
    
    
            transform: translateX(0);
        }
        to{
    
    
            transform: translateX(-400px);
        }
    }

3. 改变元素的状态——旋转

• 旋转：围绕着指定的轴，按照指定的角度发生的旋转
• 函数：rotateX rotateY
• 函数取值：数字
• 单位：deg（度数）
• 取值为正顺时针旋转，取值为负逆时针旋转

4.改变元素的大小——缩放

• 缩放：改变元素的大小
• 函数：scale（x，y）
• 若scale的取值只有一个，那么表示xy轴同时改变相同的倍数

5.改变元素的形态——倾斜

• 函数：skew()
• 取值 ：为角度

6.过渡

6.1 什么是过渡

过渡：元素从一个状态到另外一个状态的平滑变换的过程
过渡属性：transition

6.2 过渡的四要素

6.2.1 transition-property

• transition-property：元素的哪个状态发生变化时要使用过渡的效果，当指定的属性发生改变时，就会触发过渡效果。
• 语法：
  transition-property:none | all | property
  transition-property:background;
  transition-property:all;

6.2.2 transition-duration

• transition-duration：过渡效果的完成时间，通常以秒和毫秒为单位
• 语法：
  transition-duration:1s;

6.2.3 transition-timing-function

transition-timing-function：指定时间内(transition-duration)过渡的速度效果
取值：

• ease : 默认值，慢速开始，速度变快，慢速结束
• linear:匀速开始到结束
• ease-in:慢速开始，加速效果(由慢到快)
• ease-out:慢速结束，减速效果(由快到慢)
• ease-in-out:以慢速开始和结束，先加速再减速

6.2.4 transition-delay

transition-delay：过渡延迟时间，以秒或毫秒作为单位