版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39141044/article/details/82350591
一、过渡 (transition)
过渡的概念
- 允许CSS的属性在一定时间区间内平滑过渡
- 在鼠标单击、获取焦点、被点击、或对元素任何改变中触发，并圆滑的以动画效果改变CSS的属性值。
兼容性
| IE10+ | FireFox16+ | Chrome26+ | Safari6.1+ | Opera12.1 |
|---|
建议使用兼容的写法
-webkit-transition:....
-moz-transition:....
-ms-transition:....
-o-transition:....
transition:....过渡的属性
- transition-propery ：设置对象中要参与过渡的属性。
- transition-duration：设置对象过渡的持续时间
- transition-delay：
- transition-timing-function：设置过渡动画类型
- transition
1.transition-propery 过渡属性
语法
transtion-propery: none（没有属性改变） | all（所有属性改变，默认值） | propery(指定的属性名称)2.transition-duration 过渡时间
语法
transition-duration: time（单位：秒，默认值0）3.transition-timing-function 过渡动画
语法
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out参数说明
- linear：线性过度，等同于贝塞尔曲线（0.0, 0.0, 1.0, 1.0）
- ease：平滑过渡，等同于贝塞尔曲线（0.25, 0.1, 0.25, 1.0）
- ease-in：由慢到快，等同于贝塞尔曲线（0.42, 0, 1.0, 1.0）
- ease-out：由快到慢，等同于贝塞尔曲线（0.0, 0.0, 0.58, 1.0）
- ease-in-out：由慢到快再到慢，等同于贝塞尔曲线（0.42, 0.0, 0.58, 1.0）
- step-start：不建议使用
- step-end：不建议使用
- steps：不建议使用
4.transition-delay 延迟
语法和transition-duration一样。
5.transition 简写（推荐使用，减少兼容写法下的代码量）
语法
transition: property duration timing-function delay;PS：顺序不能错。当不需要延迟的时候，延迟时间可以不写。
例子1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition-property</title>
<style>
*{margin: 0;padding: 0;}
div.main{
width: 100%;
height: 600px;
position: relative;
}
div.main>div.square{
width: 200px;
height: 200px;
margin: 300px;
cursor: pointer;
background: -webkit-linear-gradient(left top,red,yellow,green,blue);
background: -moz-linear-gradient(right bottom,red,yellow,green,blue);
background: -ms-linear-gradient(right bottom,red,yellow,green,blue);
background: -o-linear-gradient(right bottom,red,yellow,green,blue);
background: linear-gradient(to right bottom,red,yellow,green,blue);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: transform 2s ease-in-out;
-moz-transition: transform 2s ease-in-out;
-ms-transition: transform 2s ease-in-out;
-o-transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
}
div.main>div.square:hover{
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
-webkit-transition: transform 2s ease-in-out;
-moz-transition: transform 2s ease-in-out;
-ms-transition: transform 2s ease-in-out;
-o-transition: transform 2s ease-in-out;
transition: transform 2s ease-in-out;
}
</style>
</head>
<body>
<div class="main">
<div class="square"></div>
</div>
</body>
</html>transition简写当遇到多属性的过渡的时候可以使用all或者
transition：<single-transition>[,<single-transition>]...
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>例子2
旋转放大
方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div.main {
font-size: 14px;
font-weight: bold;
line-height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 220px;
height: 50px;
margin: auto;
cursor: pointer;
text-align: center;
background: #66ccff;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
/*过渡*/
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
div.main:hover{
font-size: 28px;
line-height: 100px;
width: 440px;
height: 100px;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
/*过渡*/
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
</style>
</head>
<body>
<div class="main">苟利国家生死以，岂因祸福避趋之</div>
</body>
</html>
方法2
div.main {
font-size: 14px;
font-weight: bold;
line-height: 50px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 220px;
height: 50px;
margin: auto;
cursor: pointer;
text-align: center;
background: #66ccff;
-webkit-transform: rotate(0deg) scale(1);
-moz-transform: rotate(0deg) scale(1);
-ms-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
/*过渡*/
-webkit-transition: transform 1s ease-in-out;
-moz-transition: transform 1s ease-in-out;
-ms-transition: transform 1s ease-in-out;
-o-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}
div.main:hover{
-webkit-transform: rotate(360deg) scale(2);
-moz-transform: rotate(360deg) scale(2);
-ms-transform: rotate(360deg) scale(2);
-o-transform: rotate(360deg) scale(2);
transform: rotate(360deg) scale(2);
/*过渡*/
-webkit-transition: transform 1s ease-in-out;
-moz-transition: transform 1s ease-in-out;
-ms-transition: transform 1s ease-in-out;
-o-transition: transform 1s ease-in-out;
transition: transform 1s ease-in-out;
}