CSS3提供的Transition动画
transition动画可以控制HTML组件的某个属性发生改变时会经历一段时间、以平滑渐变的方式,因而产生了动画效果
建议使用浏览器前缀
transition-property 指定对HTML元素的哪个CSS属性进行平滑渐变处理。该属性可以指定
background-color、width、height等各种标准的CSS属性
transition-duration 指定属性平滑渐变的持续时间。
transition-timing-function 指定渐变的速度。支持如下几个值。
ease 动画开始时较慢,然后速度加快,到达最大速度后再减慢速度
linear 线性速度。动画开始时的速度到结束时的速度保持不变
ease-in 开始时较慢,然后加快
ease-out 开始很快,然后减慢
ease-in-out 动画开始时速度较慢,然后加快,到达最大速度后再减慢速度
cubic-bezier(x1,y1,x2,y2) 通过贝济埃曲线来控制动画速度,每个值不超过1.0
实际上,该属性值完全可以代替上面5个属性值,
上面五个属性值都只是cubic-bezier的应用
ease 相当于cubic-bezier(0.25,0.1,0.25,1.0)
linear 相当于cubic-bezier(0,0,1.0,1.0)
ease-in 相当于cubic-bezier(0.42,0,1.0,1.0)
ease-out 相当于cubic-bezier(0,0,0.58,1.0)
ease-in-out 相当于cubic-bezier(0.42,0,0.58,1.0)
transition-delay 指定延迟时间,也就是指定经过多长时间的延迟才会开始执行平滑渐变
CSS3提供的Animation动画
这种动画允许开发者定义多个关键帧,浏览器将会负责计算、插入关键帧之间的虚拟动画帧
建议添加浏览器厂商前缀
animation-name 指定动画名称。该属性指定一个已有的关键帧定义
animation-duration 指定动画的持续时间
animation-timing-function 指定动画的变化速度
animation-delay 指定动画延迟多长时间才开始执行
animation-iteration-count 指定动画的循环执行次数,设置为infinite属性值则永远重复
animation 复合属性,可以同时设置上面5个属性,该属性值的设置顺序就是上面属性的顺序
小例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="expires" content="width=device-width" />
<title>变形与动画相关属性</title>
<style>
#Transitions .BackgroundHover {
width:400px;
height:50px;
border:1px solid black;
background-color:cyan;
padding:10px;
transition: background-color 0.3s linear;
}
#Transitions .BackgroundHover:hover {
background-color: yellow;
}
#imgTarget {
height: 400px;
width: 400px;
border:1px solid black;
top:0px;
left:55%;
}
#target {
top: 0;
left: 0;
position:sticky;
border: 2px solid black;
transition: left 0.3s linear,top 0.3s linear,border 0.3s linear;
}
#CubicBezier .Border {
width: 300px;
height: 400px;
border: 1px solid black;
}
#CubicBezier .Border div {
height: 50px;
width: 10px;
-webkit-transition-delay: 2s;
}
#CubicBezier input{
width:20px;
}
@keyframes fkjava {
0% {left: 100px; }
40%{left:150px; }
60%{left:75px; }
100%{left:100px; }
}
#Animation div{
background-color:gray;
border:1px solid black;
position:absolute;
left:100px;
width:60px;
height:60px;
}
#Animation div {
animation-name: fkjava;
animation-duration: 5s;
animation-iteration-count: infinite;
}
@keyframes Complex {
0% {
transform: rotate(0deg);
background-color: #f00;
}
25% {
transform: rotate(90deg) scale(1.5);
background-color: #ff0;
}
50% {
transform: rotate(180deg) scale(2);
background-color: #f0f;
}
75% {
transform: rotate(270deg) scale(1.5);
background-color: #00f;
}
100% {
transform: rotate(360deg);
background-color: #f00;
}
}
#Complex div {
background-color: gray;
border: 1px solid black;
position: sticky;
left: 160px;
top:120px;
width: 60px;
height: 60px;
}
#Complex div {
animation-name: Complex;
animation-duration: 4s;
animation-iteration-count: infinite;
}
a:link{text-decoration:none}
#fisheye a{
display:inline-block;
text-align:center;
width:120px;
background-color:#eee;
}
@keyframes fisheye{
0%{
transform:scale(1);
background-color:#eee;
}
40% {
transform: scale(1.015);
background-color: #bbb;
}
100% {
transform: scale(1);
background-color: #eee;
}
}
#fisheye a{
animation-name:fisheye;
animation-duration:3s;
animation-iteration-count:infinite;
}
</style>
</head>
<body>
<h2>Transition动画</h2>
<div id="Transitions">
<div class="BackgroundHover">鼠标悬停到该元素背景颜色渐变</div>
</div>
<h2>多个属性同时渐变</h2>
<div id="imgTarget">
<img id="target" src=" " alt="Img" />
</div>
<h2>指定动画速度</h2>
<div id="CubicBezier">
<div class="Border">
<div id="div1" style="background-color:aqua;transition:width 3s ease;"></div>
<div id="div2" style="background-color:darksalmon;transition:width 3s linear;"></div>
<div id="div3" style="background-color:gold;transition:width 3s ease-in;"></div>
<div id="div4" style="background-color:salmon;transition:width 3s ease-out;"></div>
<div id="div5" style="background-color:paleturquoise;transition:width 3s ease-in-out;"></div>
<div id="div6" style="background-color:paleturquoise;transition:width 3s cubic-bezier(0.05,0.5,0.9,1.0);"></div>
</div><br />
<button onclick="ease()">ease</button>
<button onclick="linear()">linear</button>
<button onclick="easeIn()">ease-in</button>
<button onclick="easeOut()">ease-out</button>
<button onclick="easeInOut()">ease-in-out</button>
<button onclick="custom()">自定义</button>
<button onclick="All()">一键</button><br />
</div>
<h2>Animation动画</h2>
<div id="Animation" style="height:200px;">
<div>Animation动画</div>
</div>
<h2>同时改变多个属性的动画</h2>
<div id="Complex" style="height:200px;">
<div>改变多个属性的动画</div>
</div>
<h2>鱼眼效果</h2>
<div id="fisheye" style="height:200px;background-color:#eee;">
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
<a href="#">测试文字</a>
</div>
<!--多属性渐变-->
<script type="text/javascript">
var target = document.getElementById("target");
var imgTarget = document.getElementById("imgTarget");
imgTarget.onmousedown = function (evt) {
target.style.left = evt.clientX + "px";
target.style.top = evt.clientY + "px";
}
</script>
<!--指定动画速度-->
<script type="text/javascript">
var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
var div3 = document.getElementById("div3");
var div4 = document.getElementById("div4");
var div5 = document.getElementById("div5");
var div6 = document.getElementById("div6");
function ease() {
if (div1.style.width == "" || div1.style.width == "10px") {
div1.style.width = 300 + "px";
} else {
div1.style.width = 10 + "px";
}
}
function linear() {
if (div2.style.width == "" || div2.style.width == "10px") {
div2.style.width = 300 + "px"
} else {
div2.style.width = 10 + "px"
}
}
function easeIn() {
if (div3.style.width == "" || div3.style.width == "10px") {
div3.style.width = 300 + "px"
} else {
div3.style.width = 10 + "px"
}
}
function easeOut() {
if (div4.style.width == "" || div4.style.width == "10px") {
div4.style.width = 300 + "px"
} else {
div4.style.width = 10 + "px"
}
}
function easeInOut() {
if (div5.style.width == "" || div5.style.width == "10px") {
div5.style.width = 300 + "px"
} else {
div5.style.width = 10 + "px"
}
}
function custom() {
if (div6.style.width == "" || div6.style.width == "10px") {
div6.style.width = 300 + "px"
} else {
div6.style.width = 10 + "px"
}
}
function All() {
ease();
linear();
easeIn();
easeOut();
easeInOut();
custom();
}
</script></body>
</html>