CSS3学习笔记（五）
2019-08-27 本文已影响0人
dev_winner
-
过渡属性 transition-property：早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变CSS的属性值。 -
在CSS中创建简单的过渡效果可通过以下几个步骤来实现：
1、在默认样式中声明元素的初始状态样式；
2、声明过渡元素最终状态样式，比如悬浮状态；
3、在默认样式中通过添加过渡函数，添加一些不同的样式。 -
CSS3的过度transition属性是一个
复合属性，主要包括以下几个子属性：
1、transition-property：指定过渡或动态模拟的CSS属性；
2、transition-duration：指定完成过渡所需的时间；
3、transition-timing-function：指定过渡函数；
4、transition-delay：指定开始出现的延迟时间。 -
transition-property：指定过渡动画的CSS属性名称，而这个过渡属性只有具备一个中点值的属性（需要产生动画的属性）才能具备过渡效果，其对应具有过渡的CSS属性主要有：
具有过渡的CSS属性
-
注意：当
transition-property属性设置为all（表示初始状态设置的过渡属性）时，表示所有中点值的属性。举个例子：假设初始状态设置了样式width,height,background，而在终始状态都改变了这三个属性，那么all代表的就是width、height和background。若终始状态只改变了width和height时，那么all代表的就是width和height！ -
transition-duration属性：用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。 -
transition-timing-function属性：指的是过渡的缓动函数。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数：
过渡函数
-
transition-delay属性：指定一个动画开始执行的时间，即当改变元素属性值后多长时间开始执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
.test1 {
width: 100px;
height: 100px;
background: pink;
margin: 20px auto;
/*过渡的属性为宽度*/
-webkit-transition: width;
transition: width;
/*完成过渡所需时间为0.5s*/
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: .18s;
transition-delay: .18s;
}
.test1:hover {
width: 300px;
}
.test2 {
width: 100px;
height: 100px;
background-color: red;
margin: 20px auto;
-webkit-transition: background-color .5s ease .1s;
transition: background-color .5s ease .1s;
}
.test2:hover {
background-color: green;
}
/*在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。*/
.test3 {
width: 150px;
height: 100px;
background-color: orange;
margin: 20px auto;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.test3:hover {
border-radius: 20px;
}
/*在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease-in-out函数。*/
.test4 {
width: 100px;
height: 100px;
background: blue;
margin: 20px auto;
-webkit-transition-property: -webkit-border-radius;
transition-property: border-radius;
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-delay: .2s;
transition-delay: .2s;
}
.test4:hover {
border-radius: 100%;
}
</style>
</head>
<body>
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
</body>
</html>
过渡效果展示
- 有时我们想改变两个或者多个css属性的transition效果时，只要把几个transition的声明串在一起，用逗号（
,）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：第一个时间的值为 transition-duration（持续时间），第二个为transition-delay（延迟开始时间）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
.wrapper {
width: 400px;
height: 200px;
margin: 20px auto;
border: 2px dotted red;
position: relative;
}
.wrapper div {
padding: 15px 20px;
color: #fff;
background-color: orange;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/*all设置所有过渡属性都起作用*/
-webkit-transition: all .5s ease-in .2s;
transition: all .5s ease-in .2s;
}
.wrapper div:hover {
background-color: red;
border-radius: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div>鼠标放到我的身上来</div>
</div>
</body>
</html>
过渡多个CSS属性
-
Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以@keyframes开头，后面紧跟着是动画名称加上一对花括号{…}，括号中就是一些不同时间段样式规则。例如：
@keyframes changecolor{
0%{
background: red;
}
100%{
background: green;
}
}
- 在一个
@keyframes中的样式规则可以由多个百分比构成的，如在0%~100%之间创建更多个百分比，分别给每个百分比中给需要有动画效果的元素加上不同的样式，从而达到一种在不断变化的效果。 - 在@keyframes中定义动画名称时，其中0%和100%还可以使用关键词
from和to来代表，其中0%对应的是from，100%对应的是to。 - animation 属性是一个简写属性，用于将动画与元素绑定在一起，其中几个动画属性如下：
1、animation-name：指定要绑定到选择器的关键帧名称；默认值为none。当值为none时，没有任何动画效果，其可用于覆盖任何动画。
2、animation-duration：用来设置CSS3动画播放时间，单位为秒，其默认值为0。若其为负值，则会被视为0。
3、animation-timing-function：设置动画的播放方式；
4、animation-delay：设置动画在启动前的延迟间隔；
5、animation-iteration-count：定义动画的播放次数；默认值为1，表示动画将从开始到结束只播放一次；若取值为infinite，动画将会无限次地播放。
6、animation-direction：指定是否应该轮流反向播放动画。其有两个值：normal、alternate。默认值为normal；当设置为normal时，动画的每次循环都是向前播放（每完成一个周期后瞬间回到初始状态）；当设置为alternate，则轮流反向播放动画。
7、animation-play-state：用来控制元素动画的播放状态。其有两个值：running和paused。默认值为running。主要作用类似于音乐播放器一样，可通过paused暂停正在播放的动画，也可通过running重新播放暂停的动画，这里的重新播放不一定是从元素动画的初始位置播放，而是从暂停的那个位置开始播放。另外，若暂停了动画的播放，元素的样式将回到最原始设置状态。
8、animation-fill-mode：定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：
| 属性值 | 效果 |
|---|---|
| none | 默认值，表示动画在延迟开始时间内显示背景颜色（而不是初始帧！）；开始后按预期进行和结束，在动画完成其最后一帧时，动画会回到背景颜色的状态！ |
| forwards | 表示动画在结束后继续应用最后的关键帧的位置（即保持末态关键帧） |
| backwards | 会在向元素应用动画样式时迅速应用动画的初始帧，即若与背景颜色不同，在动画的开始延迟时间内显示的每一帧为初始帧状态，在动画完成其最后一帧时显示为背景颜色的状态！ |
| both | 元素动画同时具有forwards和backwards效果，即动画在第一关键帧上等待动画开始，在动画结束时停在最后一个关键帧上而不回到动画的第一帧上。 |
- 注意：请始终规定
animation-duration属性，否则时长为 0，就不会播放动画了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
@keyframes changecolor {
0% {
background: red;
}
20% {
background: blue;
}
40% {
background: orange;
}
60% {
background: green;
}
80% {
background: yellow;
}
100% {
background: red;
}
}
div {
width: 300px;
height: 200px;
background: red;
color: #fff;
margin: 20px auto;
text-align: center;
}
div:hover {
/*animation 属性是一个简写属性，将动画与 div 元素绑定*/
animation: changecolor 5s ease-out .2s;
}
</style>
</head>
<body>
<div>鼠标放在我身上</div>
</body>
</html>
设置动画播放效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变形与动画</title>
<style type="text/css">
@keyframes move {
0% {
transform: translateY(90px);
}
15% {
transform: translate(90px, 90px);
}
30% {
transform: translate(180px, 90px);
}
45% {
transform: translate(90px, 90px);
}
60% {
transform: translate(90px, 0);
}
75% {
transform: translate(90px, 90px);
}
90% {
transform: translate(90px, 180px);
}
100% {
transform: translate(90px, 90px);
}
}
div {
width: 200px;
height: 200px;
border: 1px solid red;
margin: 20px auto;
}
span {
display: inline-block;
width: 20px;
height: 20px;
background: orange;
transform: translateY(90px);
animation-name: move;
animation-duration: 5s;
animation-timing-function: ease-in;
animation-delay: .2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: paused;
}
div:hover span {
/*设置从暂停的位置继续播放*/
animation-play-state: running;
}
</style>
</head>
<body>
<div><span></span></div>
</body>
</html>
设置动画暂停后继续播放状态
