UI设计师-前端基础-CSS3_CSS3过渡(transition)和动画(animation).docx

PAGE1

PAGE1

CSS3过渡transition的基本语法

CSS3过渡属性transition为元素的属性变化提供了一种更流畅和自然的过渡效果，允许属性值在一定时间内平滑地从一个状态改变到另一个状态。这对于创建动态和交互式web界面非常有帮助，可以显著提升用户体验。

1过渡属性的构成

1.1transition-property

此属性指定应用过渡效果的CSS属性名称。可以是所有属性（all）或特定的属性。如果未指定，过渡将默认应用于所有可过渡的属性。

/*应用过渡效果至所有属性*/

div{

transition-property:all;

}

/*应用过渡效果至特定属性*/

div{

transition-property:width,height;

}

1.2transition-duration

此属性定义过渡效果完成所需的时间，以秒（s）或毫秒（ms）为单位。

div{

transition-duration:2s;

}

1.3transition-timing-function

此属性定义过渡效果的速度曲线，默认为ease，表示动画速度先慢、中快、后慢。可以使用linear、ease-in、ease-out或ease-in-out等预定义函数，也可以使用cubic-bezier自定义函数。

/*使用默认的ease函数*/

div{

transition-timing-function:ease;

}

/*使用linear函数*/

div{

transition-timing-function:linear;

}

/*使用自定义的cubic-bezier函数*/

div{

transition-timing-function:cubic-bezier(0.1,0.3,0.2,1);

}

1.4transition-delay

此属性定义过渡效果开始前的延迟时间，以秒（s）或毫秒（ms）为单位。默认为0，即过渡效果立即开始。

div{

transition-delay:1s;

}

1.5简写属性：transition

可以将上述四个属性写成一个简写属性transition。

/*等同于transition-property:all;transition-duration:2s;transition-timing-function:ease;transition-delay:0;*/

div{

transition:all2sease0;

}

1.6使用过渡

要使用过渡，需要在元素上设置初始和结束的CSS属性值。这通常通过:hover伪类或其他状态变化来完成。

div{

width:100px;

height:100px;

background:red;

transition:all2sease0;

}

div:hover{

width:200px;

height:200px;

background:blue;

}

在这个例子中，当用户将鼠标悬停在div元素上时，其宽度、高度和背景颜色将在2秒内平滑地从初始值改变到目标值。使用ease函数，过渡效果的速度将先慢、中快、后慢。

2CSS3动画animation的基本语法

CSS3动画属性animation允许创建更复杂、更精细的运动效果，而不仅仅是简单的过渡。通过在关键帧使用@keyframes规则，可以定义整个动画序列。

2.1@keyframes规则

@keyframes规则用于定义动画的名称和关键帧。每个关键帧将定义动画在特定时间点的样子。

/*定义名为myAnimation的动画*/

@keyframesmyAnimation{

0%{

background:red;

}

50%{

background:yellow;

}

100%{

background:blue;

}

}

2.2animation-name

此属性指定在元素上应用的动画名称。

div{

animation-name:myAnimation;

}

2.3animation-duration

此属性定义动画完成一个周期所需的时间。

div{

animation-duration:4s;

}

2.4animation-timing-function

与过渡一样，此属性定义动画速度曲线。

div{

animation-timing-function:ease-in;

}

2.5