Hi~,我是 一碗周,一个在舒适区垂死挣扎的前端,如果写的文章有幸可以得到你的青睐,万分有幸~
🍇 写在前面
关于transition
和animation
这两个CSS3属性想必大家都知道,这两个属性都是非常常用的属性,本篇文章来介绍一下关于transition
和animation
这两个的细节。
ps:本篇文章参考张鑫旭大佬的新书——《CSS新世界》
🍈 transition属性
首先我们来看一下transition
属性的一些细节。
🍉 transition-delay传递负值的情况
我们都知道,transition
属性是transition-property
,transition-duration
,transition-timing-function
和transition-delay
的一个简写属性;
当传递两个时间时第一个表示transition-duration
,第二个表示transition-delay
,MDN中原文如下:
零,一或两个 \<time> 值。可以解析为时间的第一个值被分配给 transition-duration,并且可以解析为时间的第二个值被分配给 transition-delay。
例如下面这段代码:
transition: 4s 1s; /* 动画执行4s,延迟1s */
transition: 1.5s .5s; /* 动画执行1.5s,延迟0.5s */
而第二个时间时允许写成负值的,示例代码如下:
transition: 4s -1s; /* 动画执行4s,延迟-1s */
transition: 1.5s -.5s; /* 动画执行1.5s,延迟-0.5s */
当第一个时间写成负值时,则会变成延迟时间,第二个变成执行时间,示例代码如下:
transition: -1s 2s; /* 动画执行2s,延迟-1s */
而且延迟时间变成负值时,过渡动画的执行也不是从头开始的,而是从过渡动画执行了延迟时间的那一刻开始执行,例如下面这段代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>transition负值</title>
<style>
body { margin: 0; }
.box {
height: 100px; width: 200px; background: lightcoral;
transition: 2s -0.5s;
}
.box:hover { width: 600px; }
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
代码运行结果如下:
我们将鼠标悬停到盒子上时,它的宽度瞬间到了400px,然后执行过渡动画,离开时的效果也一致,这个就是transition-delay
属性传递负值的效果
🍊 多余的all
当我们使用transition
属性定义过渡动画时,通常是下面这段写法:
transition: all 1.5s .5s;
但是在transition-property
属性的默认值就是all
,所以说我们并不需要编写这个多余的值。
🍋 模拟长时间悬停或长按效果
使用transition
属性还有要给SAO操作,可以模拟长按或长时间悬停效果,主要是通过transitionend
事件完成,transitionend
事件在过渡动画执行完毕后触发,具体可以参考MDN;
实现代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>模拟长按和长悬停效果</title>
<style>
button { appearance: none; border: none; outline: none; cursor: pointer; white-space: nowrap; line-height: 40px;width: 80px;height: 40px;color: #fff;background-color: #1171ee;border-radius: 4px;}
button.active {
transition: background-color 1s;
}
.active:hover { background: #3683e9; }
button:active { background: #0d65d8; }
</style>
</head>
<body>
<button id="btn1">悬停</button>
</body>
<script>
const $btn1 = document.getElementById('btn1')
function addClass(e) {
event.target.setAttribute('class', 'active')
}
function removeClass(e) {
event.target.setAttribute('class', '')
}
function AddListener() {
console.log('延迟了1s触发')
}
$btn1.addEventListener('mouseenter', addClass)
$btn1.addEventListener('mouseleave', removeClass)
$btn1.addEventListener('transitionend', AddListener)
</script>
</html>
代码允许效果如下所示:
如果想要实现长按直接换成对应的事件即可。
🍌 animation属性
🍍 @keyframes规则的细节
在定义动画序列时,起始关键帧可以不容设置,默认会采用元素的样式作为起始关键帧,例如这段代码:
.box {
height: 100px;
width: 200px;
background: lightcoral;
opacity: 0.5;
animation: fadeIn 1s infinite;
}
@keyframes fadeIn {
100% {
opacity: 1;
}
}
该动画效果就会从透明度50%~100%
进行过渡。
关键帧列表可以进行合并且无序,示例代码如下:
@keyframes fadeIn {
0%,
50%,
100% {
opacity: 0;
}
25%,
75% {
opacity: 1;
}
}
还有就是动画序列中的是没有意义的,因为动画序列的优先级是最高的。
🍎 animation-iteration-count属性
众所周知,animation-iteration-count
属性用于设置动画的执行次数,这个属性可以使用数字作为值,而且可以是小数,比如下面这段代码:
.box {
height: 100px;
width: 200px;
background: lightcoral;
animation: fadeIn 1s 0.5 0.5s both;
}
@keyframes fadeIn {
100% {
opacity: 0;
}
}
动画执行效果如下:
延迟0.5秒后,从透明度100%
过渡到50%
。
🍏 写在最后
本篇文章到这就结束了,如果觉得有用,可以点赞+评论支持一下~~~