css过渡是元素从一种样式逐渐改变为另一种的效果要实现这一点必须规定两项内容：
-
指定要添加效果的CSS属性
-
指定效果的持续时间
transition--多项变化
<style>
.transition1{
width: 100px;
height: 100px;
background-color: greenyellow;
transition: width 2s,height 2s,transform 2s;
}
.transition1:hover{
width: 200px;
height: 200px;
transform: rotateZ(45deg);
}
</style>
<body>
<div class="transition"></div>
</body>速度曲线
transition-timing-function属性规定过渡效果的速度曲线
-
ease- 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认） -
linear- 规定从开始到结束具有相同速度的过渡效果 -
ease-in-规定缓慢开始的过渡效果 -
ease-out- 规定缓慢结束的过渡效果 -
ease-in-out- 规定开始和结束较慢的过渡效果 -
cubic-bezier(n,n,n,n)- 允许您在三次贝塞尔函数中定义自己的值
<style>
.transition-t{
width: 100px;
height: 100px;
background-color: peru;
transition: width 2s;
}
.transition-t:hover{
width: 600px;
}
.timing-one{
transition-timing-function: linear;
}
.timing-two{
transition-timing-function: ease;
}
.timing-three{
transition-timing-function: ease-in;
}
.timing-four{
transition-timing-function: ease-out;
}
.timing-five{
transition-timing-function: ease-in-out;
}
</style>
<body>
<div class="transition-t timing-five"></div>
</body>
transition-delay属性规定有延迟（以秒为单位计）
属性简写
div {
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}简写为：
div {
transition: width 2s linear 1s;
}动画
动画使元素逐渐从央视变为另一种样式，可以随意更改任意数量的css属性，如果需要使用css动画，您必须首先为动画制定一些关键帧，关键帧包含元素在特定时间所拥有的样式
如果你在@keyfromes规则中指定了css样式，动画将在特定时间逐渐从当前样式更改为新样式要使动画生效，必须将动画绑定到某个元素
<style>
@keyframes dh{
from{
background-color: green;
}
to{
background-color: gold;
}
}
.dh{
width: 100px;
height: 100px;
background-color: green;
animation-name: dh;
animation-duration: 2s;
}
</style>
<body>
<h1>动画</h1>
<div class="dh"></div>
</body>使用关键字from和to可以设置样式改变
也可以使用百分比例如：
<style>
@keyframes dh2{
0%{
left: 0;
top: 0;
}
25%{
left: 300px;
top: 0;
}
50%{
left: 300px;
top: 300px;
}
75%{
left: 0;
top: 300px;
}
100%{
left: 0;
top: 0;
}
}
.dh2{
width: 100px;
height: 100px;
position: relative;
left: 0;
top: 0;
background-color: gold;
animation-name: dh2;
animation-duration: 2s;
}
</style>
<body>
<div class="dh2"></div>
</body>动画延迟：animation-delay属性规定动画开始的延迟时间
负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒
animation-iteration-count属性指定动画应运行的次数
反向交替运行动漫
animation-direction属性指定是向前播放，向后播放还是交替播放动漫
animation-direction 属性可接受以下值：
-
normal- 动画正常播放（向前）。默认值 -
reverse- 动画以反方向播放（向后） -
alternate- 动画先向前播放，然后向后 -
alternate-reverse- 动画先向后播放，然后向前
速度曲线
animation-timing-function 属性规定动画的速度曲线。
animation-timing-function 属性可接受以下值：
-
ease- 指定从慢速开始，然后加快，然后缓慢结束的动画（默认） -
linear- 规定从开始到结束的速度相同的动画 -
ease-in- 规定慢速开始的动画 -
ease-out- 规定慢速结束的动画 -
ease-in-out- 指定开始和结束较慢的动画 -
cubic-bezier(*n*,*n*,*n*,*n*)- 运行您在三次贝塞尔函数中定义自己的值
填充模式
CSS 动画不会在第一个关键帧播放之前或在最后一个关键帧播放之后影响元素。animation-fill-mode 属性能够覆盖这种行为。
在不播放动画时（在开始之前，结束之后，或两者都结束时），animation-fill-mode 属性规定目标元素的样式。
animation-fill-mode 属性可接受以下值：
-
none- 默认值。动画在执行之前或之后不会对元素应用任何样式。 -
forwards- 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。 -
backwards- 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。 -
both- 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
<style>
@keyframes dh3 {
from {
background-color: red;
}
to {
background-color: yellow;
}
}
.dh3 {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: dh3;
animation-duration: 4s;
animation-fill-mode: forwards;
}
</style>
<body>
<div class="dh3"></div>
</body>简写属性
div {
animation-name: example;
animation-duration: 4s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}简写为
div {
animation: example 4s linear 2s infinite alternate;
}
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
