transitions
定义:transitions提供了一种在更改CSS属性时控制动画速度的方法。 其可以让属性变化成为一个持续一段时间的过程,而不是立即生效的
属性:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay:
transition-property: 指定哪个或哪些 CSS 属性用于过渡,其值有以下几种:
none: 不设置任何属性用于过度动画
all: 设置所有属性用于过度动画 [IDENT]: 指定特定是属性一个或者多个 比如transition-property:width, bacgroud;
transition-duration: 动画过度的时长, 一个或者多个值 transition-duration: 2s,4s;
transition-timing-function: 指定一个函数,定义属性值怎么变化。常用的函数有下面几个
transition-delay: 属性延迟多长时间后进行变化 但是如果设置成负值有什么区别呢?
补充
transitions还提供了一个当变换结束的事件 el.addEventListener("transitionend", updateTransition, true);
demo
实现一个缓慢翻页的动画
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.div, img {
width: 300px;
height: 200px;
}
.div {
position: relative;
}
.div::before {
content: '';
border-style: solid;
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-width: 0;
z-index: 2;
transition: all 1s ease-out;
}
.div:hover::before {
border-right-width: 80px;
border-bottom-width: 80px;
border-right-color: rgba(255, 255, 255, 1);
border-bottom-color: rgba(217, 217, 218, 0.8);
}
</style>
</head>
<body>
<div class="div">
<img src="./001.jpg"/>
</div>
</body>
</html>
复制代码