CSS 如何设置transition动画, animation动画

一、transition动画

1.设置过渡属性

语法：transition-property:none|ident|all;

none  默认值，没有属性发生过渡

ident   指定要过渡的css属性列表

all     所有发生变化的css属性都添加过渡

2.设置过渡所需时间

语法：transition-duration:0|time;

0   默认值，没有过渡，直接看到结果

time    按照设置时间执行动画，单位为s

3.设置过渡延迟执行时间

语法：transition-delay:0|正值|负值;

0   默认值，不延迟

正值   按照设置的时间延迟执行动画

负值   设置时间前的动画将会被截断

4.设置过渡动画执行方式

语法：transition-timing-function:ease|linear|ease-in|ease-out|ease-in-out;

ease  默认值，缓解效果

linear   线性效果（匀速运动）

ease-in   渐显效果（加速运动）

ease-out   渐隐效果（减速运动）

ease-in-out   渐显渐隐效果（慢-快-慢）

5.过渡属性简写方式

语法：transition:过渡属性  过渡时间  延迟时间  执行方式;

eg:  transition:all 1s;

注：只有数值型的css属性才能添加过渡，因此我们通常用opacity的0和1来切换元素的隐藏和显示

二、animation动画

◆ 在使用animation属性之前，首先要定义好动画关键帧（声明动画），语法如下：

以下为两种不同的方式:

@keyframes  动画名称{           或         @keyframes 动画名称{
    0%{...}                                                from{...}
    20%{...}                                              20%{...}
    ...                                                        ...
    100%{...}                                            to{...}
}                                                              }

注：@keyframes针对webkit内核兼容写法如下：

@-webkit-keyframes 动画名称{...}

1.设置动画名称（调用动画）

语法：animation-name:动画名称;    

2.设置动画执行一次所需时间

语法：animation-duration:0|time;

0  默认值，不执行

time    单位为s

3.设置动画延迟执行时间

语法：animation-delay:0|正值|负值;

注：该属性设置的是整个动画执行之前的延迟

4.设置动画播放次数

语法：animation-iteration-count:1|正整数|infinite;

1  默认值，动画播放一次

正整数   指定播放次数

infinite   无限循环播放

5.设置动画运动状态

语法：animation-play-state:running|paused;

running   默认值，运动

paused    暂停

6.设置动画执行方式

语法：animation-timing-function:ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|steps(n,start|end);

step-start  马上转跳到动画的结束状态

step-end    保持动画开始时的状态，当动画结束时，马上转跳到动画结束状态

steps(n,start|end)    n设置动画分几个阶段完成

7.设置动画运动方向

语法：animation-direction:normal|reverse|alternate|alternate-reverse;

normal   默认值，正常方向运动

reverse   反向运动

alternate    正反方向交替运动

alternate-reverse     第一次反方向，然后正反方向交替运动

8.设置动画时间之外的状态

语法：animation-fill-mode:none|forwards|backwards|both;

none   默认值，不设置动画时间之外的状态

forwards   保持动画结束时的状态

backwards   保持动画开始时的状态

both        可遵循forwards和backwards两个规则

9.animation属性简写方式

语法：animation:动画名称  执行时间  延迟时间  播放次数 执行方式;

eg: animation:box_ani 3s 0.5s infinite linear;