CSS3系列14过渡时间
js控制css3动画触发
过渡时间
基础知识
在了解CSS过渡时间之前，你应该先了解⼀下CSS的变形动画，可以参考之前的⼀篇博客。
我们的元素在属性发⽣变化时，如果没有特地的为它设置过渡时间，整个变化过程其实是以毫秒级别进⾏的，过程⾮常快，⾁眼不易察觉。故我们要学习CSS过渡时间，来让它的变化过程更加平滑。
动画属性
不是所有css属性都有过渡效果， ，⼀般来讲有中间值的属性都可以设置动画如宽度、透明度等。
可以看⼀下下⾯这个例⼦，⽐如边框的样式就不⽀持过渡效果，⽽其他的诸如背景颜⾊，⾼度宽度等等都是⽀持过渡效果的。
可以看到，在⿏标放上去的瞬间，边框的样式就发⽣变化了，⽽不是再跟随过渡时间进⾏渐变。
⽽其他的属性，诸如背景颜⾊，圆⾓等都是跟随过渡时间进⾏渐变的。
代码⽰例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
div {
height: 50px;
width: 50px;
background: #747d8c;
border: 10px solid #ff6348;
/* 添加过渡时间 1s */
transition: 1s;
}
body:hover div {
background: #5352ed;
border: 10px dotted #ffa502;
width: 100px;
height: 100px;
border-radius: 50%;
transform: translate(100px, 100px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
元素状态
初始形态
指当页⾯加载后的样式状态，下⾯是表单设置的初始样式。
变化形态
指元素由初始状态变化后的状态，⽐如⿏标放上、表单获得焦点后的形态。
代码⽰例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #2c3e50;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 100vw;
height: 100vh;
• padding: 20px;
}
input {
border: solid 5px #e67e22;
height: 60px;
width: 400px;
margin-bottom: 20px;
transition: 2s;
}
input:hover {
border: solid 5px #000 !important;
}
input:focus {
background: #e67e22;
}
input:checked {
position: relative;
width: 60px;
height: 60;
border: none;
}
}
input:checked::before {
content: ' ';
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 3em;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
background: #3498db;
}
</style>
</head>
<body>
<input type="text">
<input type="checkbox" checked>
</body>
</html>
过渡效果
transition-property
⽤于设置哪些属性应⽤过渡效果。
默认值为all即所有属性都发⽣过渡效果
多个属性使⽤逗号分隔
当我们使⽤该选项时，注意要和transition-duration搭配使⽤才能⽣效，这个才是⾮简写的过渡时间。
transition只是⼀种简写形式，如果使⽤transition-duration与transition进⾏搭配使⽤，则不会⽣效transition-duration。
属性设置
注意看，下⾯的这张图⽚⾥transition-duration只设置了圆⾓与透明度，其他的诸如宽度⾼度背景颜⾊等均未设置，所以在⿏标放上去的⼀瞬间未设置的属性⽴刻产⽣了变化，⽽圆⾓和透明度是随着过渡时间渐渐变化的。
代码⽰例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
}
main {
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 100px;
height: 100px;
background: #f39c12;
transition-property: border-radius, opacity;
/* 这个才是真正的设置过渡时间，
transition只是简写形式 */
transition-duration: 1s;
opacity: .5;
}
main:hover div {
border-radius: 50%;
width: 150px;
height: 150px;
background: #2ecc71;
opacity: 1;
}
</style>
</head>
<body>
<main>
<div></div>
</main>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。