CSS学习笔记之CSS3新特性

时间:2022-12-21 11:02:55

这篇文章,我们将会介绍在 CSS3 中加入的 过渡动画 效果

1、过渡

通过 CSS3,我们可以在不使用 Flash 或 JavaScript 的情况下,使得元素在样式转换时添加过渡效果

(1)属性名称

可以使用 transition-property 规定应用过渡效果的属性名称,当指定的属性改变时,过渡效果开始作用

可选值如下:

  • none:表示没有属性获得过渡效果,默认值
  • all:表示所有属性获得过渡效果
  • 名称列表:指定获得过渡效果的属性,列表以逗号分隔

(2)作用时间

可以使用 transition-duration 规定过渡效果的作用时间,其接受一个时间值,默认为 0

因此在使用过渡效果时,必须要设置 transition-duration 属性,否则将无法看到过渡效果

(3)作用速度

可以使用 transition-timing-function 规定过渡效果的速度曲线,可选值如下:

  • linear:以相同的速度从开始至结束
  • ease:默认值,以慢速开始,然后变快,以慢速结束
  • ease-in:以慢速开始
  • ease-out:以慢速结束
  • ease-in-out:以慢速开始,以慢速结束

(4)延迟时间

可以使用 transition-delay 延迟过渡效果的开始时间,这个属性同样接受一个时间值,默认为 0

(5)简写属性

为了方便,可以仅在 transition 属性中设置所有有关过渡效果的属性

transition: property duration timing-function delay;

一个简单的例子如下:

<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: LightSkyBlue;
}
div:hover {
width: 300px;
}
.withTransition {
width: 100px;
height: 100px;
background: LightSkyBlue;
transition: width 1s ease;
-o-transition: width 1s ease; /* Opera */
-moz-transition: width 1s ease; /* Firefox */
-webkit-transition: width 1s ease; /* Safari and Chrome */
}
/* 当鼠标停留在 div 元素上时,宽度将会变化,从而产生过渡效果 */
</style>
</head>
<body>
<div></div>
<br/>
<div class="withTransition"></div>
</body>
</html>

2、动画

通过 CSS3,我们可以在不使用 Flash 或 JavaScript 的情况下,为网页创建动画

(1)动画名称

可以使用 animation-name 属性规定动画名称,它的可选值有两个:

  • none:无动画,一般用于覆盖来自级联的动画效果

  • 名称:定义动画名称

(2)播放时间

可以使用 animation-duration 规定动画效果的作用时间,其接受一个时间值,默认为 0

因此在使用动画时,必须要设置 animation-duration属性,否则将无法看到动画效果

(3)播放速率

可以使用 animation-timing-function 规定动画效果的速度曲线,可选值如下:

  • linear:以相同的速度从开始至结束
  • ease:默认值,以慢速开始,然后变快,以慢速结束
  • ease-in:以慢速开始
  • ease-out:以慢速结束
  • ease-in-out:以慢速开始,以慢速结束

(4)延迟时间

可以使用 animation-delay 延迟动画效果的开始时间,这个属性同样接受一个时间值,默认为 0

(5)播放次数

可以使用 animation-iteration-count 属性规定动画的播放次数,可选值如下:

  • 数字:表示播放次数,默认为 1
  • infinite:表示无限播放

(6)播放方向

可以使用 animation-direction 属性规定动画的播放方向,可选值如下:

  • normal:默认值,正常播放
  • alternate:轮流反向播放

(7)播放状态

可以使用 animation-play-state 属性规定动画的播放状态,可选值如下:

  • running:默认值,正在播放
  • paused:暂停

(8)间隙可见性

可以使用 animation-fill-mode 属性规定动画在播放之前或之后效果的可见性,可选值如下:

  • none:不改变默认行为
  • forwards:在动画完成之后,保持最后的属性值(在最后一个关键帧中定义)
  • backwards:在动画显示之前,应用开始的属性值(在第一个关键帧中定义)
  • both:在动画显示之前应用开始的属性值,在动画完成之后保持最后的属性值

(9)简写属性

为了方便,可以仅在 animation 属性中设置所有有关动画的属性

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

(10)@keyframes 规则

动画的原理其实就是将一套 CSS 样式逐渐变换成另一套 CSS 样式

我们可以通过 keyframes 规则,通过百分比定义关键帧的 CSS 样式,从而创建出一个连续播放的动画

另外除了使用百分比,也能使用关键字定义关键帧,关键字分别是 from(对应 0%)和 to(对应 100%

一个简单的例子如下:

<!DOCTYPE HTML>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: LightSkyBlue;
position: relative;
animation: test 2s linear infinite alternate;
-webkit-animation: test 2s linear infinite alternate; /*Safari and Chrome*/
} @keyframes test {
from { left: 0px; }
to { left: 200px; }
} @-webkit-keyframes test { /*Safari and Chrome*/
from { left:0px; }
to { left:200px; }
}
</style>
</head>
<body>
<div></div>
</body>
</html>

【 阅读更多 CSS 系列文章,请看 CSS学习笔记