css过渡和动画

过渡 transition

一、语法

transition: property duration timing-function delay;

默认值： all 0 ease 0
简单示例：transition: all .5s ease-in-out 1s;
transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property : 为哪些属性设置过渡效果
• transition-duration : 过渡效果持续的时间
• transition-timing-function : 过渡效果的速度变化
• transition-delay : 延迟执行的时间

二、属性

1、过渡属性

transition-property: none | all | property;

• none : 没有属性会获得过渡效果
• all : 所有属性都将获得过渡效果
• property : 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔

div {
    background:red;
    transition-property: background;
    transition-duration: 2s;
}
div:hover {
    background:salmon;
}

2、持续时间

transition-duration: time;

time为数值，单位为s（秒）或者ms(毫秒)

div {
    background:red;
    transition-property: background;
    transition-duration: 2s;
}
div:hover {
    background:salmon;
}

3、速度变化

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out;

• ease : 由快到慢，逐渐变慢
• linear : 匀速
• ease-in : 加速
• ease-out : 减速
• ease-in-out : 加速再减速
• cubic-bezier(n,n,n,n) : 贝塞尔曲线,自定义

div {
    background:red;
    transition-property: background;
    transition-duration: 2s;
    transition-timing-function:linear;
}
div:hover {
    background:salmon;
}

4、延迟时间

transition-delay: time;

time为数值，单位为s（秒）或者ms(毫秒)

div {
    background:red;
    transition-property: background;
    transition-duration: 2s;
    transition-timing-function:linear;
    transition-delay:2s;
}
div:hover {
    background:salmon;
}

动画 animation

一、语法

animation: name duration timing-function delay iteration-count direction;

默认值： none 0 ease 0 1 normal
animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name : 要绑定到选择器的关键帧（动画）名称
• animation-duration : 动画持续时间
• animation-timing-function : 动画的速度变化
• animation-delay : 延迟执行的时间
• animation-iteration-count : 动画的播放次数
• animation-direction : 动画运动的方向

二、属性

1、关键帧

2、持续时间

3、速度变化

4、延迟时间

5、播放次数

6、运动方向

网站导航

网站导航