在改变CSS属性的时候,transitions提供给了开发者一共方式去控制动画的速度。
通常来讲,属性改变所产生的影响是立刻生效的,举个例子:
.img {
width: 200px;
}
.img:hover {
width: 300px;
}
触发hover的时候,你将看到图片在瞬间被放大,这种突兀的变化会带来很差的用户体验。
而使用CSS transitions就可以展现出变化过程中的过渡段。也就是说,transitions会将整个变化的过程展现出来,而不是简单的始态->末态。
CSS transitions可以让开发者自己决定动画行为。包括动画属性、什么时间开始动画、动画持续时间以及动画的类型。
以下属性都可以使用动画
上图中的可用属性集合可能会随着时间推移发生变化,开发者应该时刻关注最新的可用属性。
这里可以看到最新的标准。
.box {
border-style: solid;
border-width: 1px;
display: block;
width: 100px;
height: 100px;
background-color: #0000FF;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.box:hover {
background-color: #FFCCCC;
width: 200px;
height: 200px;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
可以看到上一个例子中,transition属性的值有一大堆,如果动画再复杂一些,这个值就会更长;为了保证程序的可读性,建议使用CSS属性对其进行定义。
指定需要应用transition的属性名称,只有被列出的这些属性在动画过程中是连续变化的,未列出的属性保持原来的行为。
上面的例子可以写成如下形式:
transiton-property只指出了需要应用动画的属性,接下来我们要使用transition-duration指定动画的过渡时间。
.box {
...
-webkit-transition-property: width, height, background-color, -webkit-transform;
transition-property: width, height, background-color, transform;
-webkit-transition-duration: 2s;
tansition-duration: 2s;
}
上面的程序表示所有属性的变换都经过2s时间,如果我们想要让不同的属性的变换持续时间不同呢?
.box {
transition-property: width, height, background-color, transform;
tansition-duration: 2s, 1s, 3s, 5s;
}
这样我们就定义了不同属性的不同持续时间。
如果属性名和持续时间的数量的对应相等的,则属性名和持续时间是一一对应的关系,即上面的程序有如下的变换时间:
.box {
transition-property: width, height, background-color, transform;
tansition-duration: 2s, 1s;
transition-property: width, height, background-color, transform;
tansition-duration: 2s, 1s, 2s, 1s;
}
如果属性名个数 < 持续时间个数
.box {
transition-property: width, height, background-color, transform;
tansition-duration: 2s, 1s, 3s, 5s, 6s;
transition-property: width, height, background-color, transform;
tansition-duration: 2s, 1s, 3s, 5s;
}
总结一下就是时间个数少的进行重复,多的截取。
用贝塞尔曲线作为动画的过渡函数。它决定了变换的过程是怎样的,是快-慢-快或是慢-快-慢又或者是线性变换等等,通过设置不同的贝塞尔曲线,我们可以得到不同的过渡动画。它只改变转换的过程,但不影响变换最终的结果。
.box {
transition-timing-function: ease;
transition-timing-function: linear;
transition-timing-function: step-end;
transition-timing-function: steps(4, end);
...
}
定义了从属性改变到变换开始之间的间隔时间。
.box {
transition-delay: 0.5s
}
.box {
transition: ;
}
el.addEventListener("transitionstart", func1, true);
el.addEventListener("transitionrun", func2, true);
el.addEventListener("transitionend", func3, true);
表示触发当前事件的属性名
一个用来表示转换触发了多长时间的浮点数
MDN地址
// 公用样式
@mixin common-hover {
&:hover {
&::before {
width: 151px;
}
}
&::before {
content: "";
width: 0;
transition: width 1s;
height: 7px;
background: #19fcff;
border-radius: 10px;
box-shadow: 0 0 8px #ddd;
position: absolute;
left: 30.5%;
box-shadow: 0 0 10px #19fcff;
bottom: 1px;
animation-name: shineLuminous;
animation-duration: 1.5s;
// 重复执行动画
animation-iteration-count: infinite;
}
}
// 动画发光效果关键帧
@keyframes shineLuminous {
from {
box-shadow: 0 0 10px #bbb;
}
50% {
box-shadow: 0 0 20px #9cf8f9;
}
to {
box-shadow: 0 0 15px #bbb;
}
}
.title-img-right {
@include common-hover;
position: absolute;
top: 32%;
left: 128%;
width: 335px;
height: 88px;
font-size: 35px;
padding: 5px 10px;
line-height: 88px;
text-align: center;
color: white;
background: url("/images/home/new-home/home-title-sub-img.png");
}