transition 过渡
过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果,比如 :hover
、:active
或者通过js改变状态。
- transition-property:可以是单个的属性名或者代表全部属性的all,默认为all;
- transition-duration:代表过渡时间,默认为 0s,无过渡效果;
- transition-timing-function:指定渐变的效果,平滑或者匀速,默认值为 ease;
- transition-delay:指定延时,默认为 0s;
- transition:是多个属性值的缩写,可以指定一个或多个 CSS 属性的过渡效果。多个属性之间用逗号隔开。
不要给auto
属性值做过渡,会出现不可预测的结果。
div {
transition: <property> <duration> <timing-function> <delay>
}
例子
<body>
<p class=".font">佟丽娅真美<p/>
</body>
<style >
.font {
color:"red";
font-size: 14px;
transition:font-size 1s, color 2s;
}
.font:hover {
color:"yellow";
font-size: 36px;
}
</style>
animation 动画
动画包含两部分,描述动画的样式规则和指定动画开始、结束和中间过程样式的关键帧。
配置动画
animation-name:属性指定应用的一系列动画,每个名称代表一个由
@keyframes
描述的关键帧名称。默认值 none;animation-duration:设置动画一个周期的时长,默认值为0s,无动画;
animation-timing-function:指定动画的节奏,默认值为 ease;
animation-delay:指定延时,默认为 0s;
animation-iteration-count:定义动画在结束前运行的次数 可以是n次 、无限循环infinite;.如果指定多个值,则每次播放动画时,将使用列表中的下一个值,在使用最后一个值后循环回第一个值;
-
animation-direction:设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行,可选值为 normal | reverse | alternate | alternate-reverse,默认值为 normal ;
- normal:每个动画循环结束,动画重置到起点重新开始;
- reverse:反向运行动画,每周期结束动画由尾到头运行;
- alternate:动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为 ease-out;
- alternate-reverse:动画第一次运行时是反向的,然后下一次是正向,后面依次循环;
-
animation-fill-mode:指定动画执行前后如何为目标元素应用样式,可选值为 none | forwards | backwards | both,默认值为 none;
- none:当动画未执行时,动画将不会将任何样式应用于目标;
- forwards:目标将保留由执行期间遇到的最后一个[关键帧]样式;
- backwards:动画将在应用于目标时立即应用第一个关键帧中定义的值,并在
animation-delay
中保留此值; - both:动画将遵循forwards和backwards的规则,从而在两个开始前和结束后扩展动画属性。
animation-play-state:当前动画播放状态,可选值为 running | paused,初始值为 running;
增加关键帧
@keyframes 关键帧名{
from | 0% {
margin-left: 100%;
width: 300%;
}
75% {
margin-left: 25%;
width: 150%;
}
to | 100% {
margin-left: 0%;
width: 100%;
}
}
例子
<p>The Caterpillar and Alice looked at each other for some time in silence:
at last the Caterpillar took the hookah out of its mouth, and addressed
her in a languid, sleepy voice.</p>
<body>
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
</body>
<style >
@keyframes slidein {
from {
margin-left: 100%;
width: 300%;
}
to {
margin-left: 0%;
width: 100%;
}
}
</style>
关于动画事件,点击此处了解更多。