过渡
过渡效果使用transition属性表示，设置在需要过渡效果的元素上，它可以在让元素从一种样式平滑过渡为另一种样式。下面会依次介绍其属性值~
示例代码如下：
<div class="box">
世界你好
</div>.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
} 
transition-property：表示哪个属性需要过渡效果，
可选值有：
all，即元素中所有用长度值表示的属性都能过渡、
具体属性名，如height/width等可以用长度值表示的属性、
none，不过渡任何属性
常见的用长度表示的属性有：width、height、z-index、opacity、颜色、2d/3d变换属性、阴影
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
/* 设置过渡属性为width与text-shadow */
transition-property: width,text-shadow;
}
.box:hover {
width: 300px;
text-shadow: 20px 20px 2px green;
}
上述代码可以实现在鼠标hover到box时，box的宽度变大（变为300px），并且文字有了阴影
transition-duration：表示过渡持续时间，即一个状态过渡到另一个状态的耗时，单位为ms或s，设置该属性可使过渡效果更平滑；
可选值有：
0 表示无过渡时间（默认值）
s或ms，表示所有过渡属性都按同一个过渡时间
列表，分别对应每个属性的过渡时间
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
/* 设置过渡属性为width与text-shadow */
transition-property: width,text-shadow;
/* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
transition-duration: 1.5s,2s;
}
.box:hover {
width: 300px;
text-shadow: 20px 20px 2px green;
}过渡效果会更加柔和～
transition-delay：用于设置动画延迟开始的时间，单位m或ms
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
/* 设置过渡属性为width与text-shadow */
transition-property: width,text-shadow;
/* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
transition-duration: 1.5s,2s;
/* 在触发动作后间隔一秒开始过渡 */
transition-delay: 1s;
}
.box:hover {
width: 300px;
text-shadow: 20px 20px 2px green;
}transition-timing-function：用于设置过渡的类型，即动画在每个周期的持续时间内如何进行；
可选值可用关键字或贝塞尔函数或steps函数表示：
① cubic-bezier(p1, p2, p3, p4)即贝塞尔函数，可以自定义各参数，且 p1 和 p3 的值必须在 0 到 1 的范围内，可通过cubic-bezier.com网站自行定义贝塞尔函数~
② 关键字如下
ease即cubic-bezier(0.25, 0.1, 0.25, 1.0)，表示过渡在中间加速，在结尾减速（默认值）；
linear即cubic-bezier(0.0, 0.0, 1.0, 1.0)，表示过渡以匀速（线性）运动；
ease-in即cubic-bezier(0.42, 0, 1.0, 1.0)，表示过渡一开始较慢，逐渐加速直至完成
ease-out即cubic-bezier(0, 0, 0.58, 1.0)，表示过渡一开始较快，逐渐减速直至完成
ease-in-out即cubic-bezier(0.42, 0, 0.58, 1.0)，表示过渡一开始较慢，随后加速，最后再次减速直至完成；
③ steps(n, <jumpterm>)函数
其中n表示过渡步数，即按照 n 个定格在过渡中显示效果，每个定格过渡时间相同；
如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 5 个定格，又或是在包括 0% 和 100% 的情况下设置 5 个定格（在 0%、25%、50%、75% 和 100% 处）取决于使用以下jumpterm（跳跃项）之一
jumpterm定义过渡开始的位置，有：
jump-start/start表示第一个跳跃发生在过渡开始时、
jump-end/end表示最后一个跳跃在过渡结束时、
jump-none表示跳跃在过渡开始或结束时均不发生、
jump-both表示跳跃在过渡开始或结束时都发生；
transition-timing-function: step-start 相当于steps(1, jump-start)，即无过渡时间，直接显示效果；
transition-timing-function: step-end 相当于steps(1, jump-end)，即考虑过渡时间，但无过渡效果，过渡时间一到瞬间到达终点~
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
/* 设置过渡属性为width与text-shadow */
transition-property: width,text-shadow;
/* 为width设置过渡时间1.5s 为text-shadow设置过渡时间为2s */
transition-duration: 1s,1s;
/* 过渡效果分五步，且在过渡开始和结束时都跳跃 */
transition-timing-function: steps(5, jump-both)
}
.box:hover {
width: 300px;
text-shadow: 20px 20px 2px green;
}过渡复合属性：通常情况下，会利用复合属性来定义过渡效果，使用关键词transition将上述属性包含在内；
复合属性仅对过渡时间与延迟时间有顺序要求，若有一个时间，则表示为过渡时间，若为两个时间，第一个为duration，第二个为dalay；其它属性无顺序要求
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
/* 第一个时间表示过渡时间为1s 第二个时间表示延迟时间为0.5s */
/* 表示box类中的所有可以过渡属性在0.5s延迟后使用ease方式在1s内完成过渡 */
transition: all 1s 0.5s ease;
}
.box:hover {
width: 300px;
text-shadow: 20px 20px 2px green;
}动画
一幅画面一幅画面（帧）的播放连起来就成了视频，CSS3中可以通过定义一些关键帧实现动画效果；
@keyframe用于定义关键帧，可以在关键帧内定义代码片段实现动画效果（CSS会自动根据关键帧将整个动画连贯起来）
每个@keyframe 规则包含多个关键帧，可以通过from/to关键帧实现，也可以通过百分比实现
语法如下：
@keyframes slidein {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}其中slidein表示关键帧名称，from关键字定义动画开始时（第一帧画面）的效果，to关键字表示动画结束时（最后一帧画面）的效果~
或者使用百分比表示关键帧位置：
@keyframes identifier {
/* 第一帧画面的效果 */
0% { top: 0; left: 0; }
/* 在动画的30%处画面的效果 */
30% { top: 50px; }
/* 在动画的68%与72%处画面的效果 */
68%, 72% { left: 50px; }
/* 最后一帧画面的效果 */
100% { top: 100px; left: 100%; }
}from即为0%处，to即为100%处的效果，当然也可以将百分比与from、to关键字混合使用~
定义完关键帧后，需要在使用动画的元素上定义动画名、动画持续时间、动画延迟时间等，
annimation-name 用于定义对应动画名，与关键帧@keyframes后面的属性名一一对应；
annimation-duration 用于定义动画持续时间，单位s或ms；
annimation-delay 用于定义动画延迟时间，单位s或ms
annimation-timing-function 用于定义动画类型，可选项与上述过渡一样，不再赘述
<div class="box">
世界你好
</div>@keyframes identifier {
/* 第一帧画面的效果 */
0% {
border-radius: 20px;
background-color: blue;
}
/* 在动画的50%处画面的效果 */
50% {
border-radius: 40px;
background-color: orange;
}
/* 最后一帧画面的效果 */
100% {
border-radius: 50%;
background-color: rgb(0, 208, 255);
}
}
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: 0 auto;
margin-top: 100px;
animation-name: identifier;
animation-duration: 1s;
animation-delay: 0.5s;
animation-timing-function: ease-in;
}一般动画默认播放一遍，可以通过设置animation-iteration-count改变播放次数，参数为正整数或infinite（无限播放）
animation-iteration-count: infinite /* 无限播放 */
一般动画交替播放时默认再从起始位置处播放，可通过设置animation-derection改变交替播放方向，可选值为 ：
normal：动画交替播放时，将重置为起始状态并重新开始；
reverse：动画交替播放时，动画将重置为此次动画的结束状态并重新开始，并且animation-timing-function也会反转，如ease-in会变成ease-out
alternate：动画在每个循环中正反交替播放，第一次迭代是正向播放。确定循环是奇数还是偶数的计数从 1 开始。
alternate-reverse：动画在每个循环中正反交替播放，第一次迭代是反向播放。确定循环是奇数还是偶数的计数从 1 开始。
animation-direction: alternate-reverse;一般动画结束时，默认停在动画开始的状态，可以通过设置animation-fill-mode改变动画之外的状态，可选值为：
forwards: 设置对象状态为动画结束时的状态；
backwards：设置对象状态为动画开始时的状态；
animation-fill-mode: backwards;可以通过设置animation-play-state设置动画的播放状态（停止、播放），可选值为：
running: 表示运行动画；
paused：表示暂停动画
恢复暂停的动画将从暂停时停止的位置开始播放，而不是从动画序列的开头重新开始播放
.box:hover {
/* 鼠标划过box类时动画停止 */
animation-play-state: paused;
}animation：表示动画的复合属性，和过渡transition一样，上述所有参数（除animation-play-state外）都可以任意搭配使用，若只设置一个时间，则为动画的过渡时间，设置两个时间则分别为过渡时间与延迟时间；
animation-play-state一般与js配合使用，控制动画的暂停与运行状态
903
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
