<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition动画效果</title>
<style>
body{
background-color: rgba(163, 207, 255, 0.69);
}
a:link{
color: #ff5ee6;
}
h4,dt,div{
font: bold 16px "微软雅黑";
}
dt{
display: inline;
float: left;
}
div{
width:130px;
height: 130px;
text-align: center;
line-height: 130px;
color: #0d3100;
cursor: pointer;
/*指定div的通用样式属性，*/
background: rgba(108, 112, 255, 0.85);
/*同时也有变换前的效果*/
-webkit-border-radius:24px;
-moz-border-radius:24px;
border-radius:24px;
}
.fir{
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-ms-transition: background 1s linear;
-o-transition: background 1s linear;
transition: background 1s linear;
/*此处只需要指定要进行变化的属性，时间以及变化形式*/
}
.fir:hover{
background: #e171ff;
/*hover模式处填要变换成的样式。相当于动画中的结束帧*/
}
.sec{
-webkit-transition: background 1s linear,color 0.5s linear,width 1s linear;
-moz-transition: background 1s linear,color 0.5s linear,width 1s linear;
-ms-transition: background 1s linear,color 0.5s linear,width 1s linear;
-o-transition: background 1s linear,color 0.5s linear,width 1s linear;
transition: background 1s linear,color 0.5s linear,width 1s linear;
/*指定多个需要变化的属性以及对应的时间1s和变化样式linear，用逗号隔开，这里只用三个做了示例，还可以指定n个。*/
}
.sec:hover{
width:350px;
background: #ab1eff;
color: #fff;
/*属性值的拼写上一定要对应，比如这里你要变化background和color。background处虽然变化的也是颜色，但是这里不能写成background-color*/
}
.thi{
-webkit-transform: translateX(20px) rotate(6deg) scale(0.75);
-moz-transform: translateX(20px) rotate(6deg) scale(0.75);
-ms-transform: translateX(20px) rotate(6deg) scale(0.75);
-o-transform: translateX(20px) rotate(6deg) scale(0.75);
transform: translateX(20px) rotate(6deg) scale(0.75);
/*这是没有鼠标钱的变形效果*/
-webkit-transform-origin:center top;
-moz-transform-origin:center top;
-ms-transform-origin:center top;
-o-transform-origin:center top;
transform-origin:center top;
/*为了达到自己想要的效果，改变额一下基准点*/
-webkit-transition: -webkit-transform 1s linear, background 1s linear,color 0.5s linear;
/*这里注意，transform要和transition的前缀一样，对应的也要写上自己的前缀*/
-moz-transition: -moz-transform 1s linear, background 1s linear,color 0.5s linear;
-ms-transition: -ms-transform 1s linear, background 1s linear,color 0.5s linear;
-o-transition: -o-transform 1s linear, background 1s linear,color 0.5s linear;
transition: transform 1s linear, background 1s linear,color 0.5s linear;
}
.thi:hover{
-webkit-transform: translateX(40px) rotate(-12deg) scale(1);
-moz-transform: translateX(40px) rotate(-12deg) scale(1);
-ms-transform: translateX(40px) rotate(-12deg) scale(1);
-o-transform: translateX(40px) rotate(-12deg) scale(1);
transform: translateX(40px) rotate(-12deg) scale(1);
/*加了鼠标以后让其变形这样*/
background: #9937ff;
color: #fff;
}
</style>
</head>
<body>
<h1>transition功能的使用方法</h1>
<h4>transition:property duration timing-function delay</h4>
<dl>
<dt>property：</dt>
<dd>表示对哪个属性进行平滑过渡（<a href="#A" TARGET="_self">具体哪些属性支持？</a>）</dd>
</dl>
<dl>
<dt>duration：</dt>
<dd>表示在多长时间内完成属性的平滑过渡</dd>
</dl>
<dl>
<dt>timing-function：</dt>
<dd>表示通过什么方法来进行平滑过渡</dd>
<ul>
<li>linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)</li>
<li> ease： 平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)</li>
<li> ease-in： 由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)</li>
<li>ease-out： 由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)</li>
<li>ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)</li>
<li> cubic-bezier(number, number, number, number)： 特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内</li>
</ul>
</dl>
<dl>
<dt>delay：</dt>
<dd>表示延迟多长时间内完成属性的平滑过渡</dd>
</dl>
<hr/>
<h1>transition功能的使用示例一</h1>
<h4>鼠标经过变换背景颜色（平滑一个属性值）</h4>
<div class="fir">文字</div>
<hr/>
<h1>transition功能的使用示例二</h1>
<h4>鼠标经过变换属性（同时平滑多个属性值）</h4>
<div class="sec">文字</div>
<hr/>
<h1>transition功能的使用示例三</h1>
<h4>鼠标经过变换属性（同时平滑多个属性值,并与transform属性结合变化形状）</h4>
<div class="thi">文字</div>
<hr/>
<h1>总结</h1>
<h4>transition只能指定变化的开始值和终止值，然后中间进行线性或其他自己指定的变化。要想设置多个关键帧，还是要靠<a href="10-2-animation制作帧动画">animation</a></h4>
<hr />
<h1 id="A">Finally，支持transition的属性以及其需要调换的类型</h1>
<h4><a href="http://css.doyoe.com/properties/transition/transition-property.htm" target="_blank">摘自css参考手册</a></h4>
属性名称 类型
background-color color
background-image only gradients
background-position percentage, length
border-bottom-color color
border-bottom-width length
border-color color
border-left-color color
border-left-width length
border-right-color color
border-right-width length
border-spacing length
border-top-color color
border-top-width length
border-width length
bottom length, percentage
color color
crop rectangle
font-size length, percentage
font-weight number
grid-* various
height length, percentage
left length, percentage
letter-spacing length
line-height number, length, percentage
margin-bottom length
margin-left length
margin-right length
margin-top length
max-height length, percentage
max-width length, percentage
min-height length, percentage
min-width length, percentage
opacity number
outline-color color
outline-offset integer
outline-width length
padding-bottom length
padding-left length
padding-right length
padding-top length
right length, percentage
text-indent length, percentage
text-shadow shadow
top length, percentage
vertical-align keywords, length, percentage
visibility visibility
width length, percentage
word-spacing length, percentage
z-index integer
zoom number
《2016-08-10 15:17 xing.org1^》
</body>
</html>
