css3中怎么實現(xiàn)動畫效果

今天就跟大家聊聊有關(guān)css3中怎么實現(xiàn)動畫效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)建站為企業(yè)級客戶提高一站式互聯(lián)網(wǎng)+設(shè)計服務(wù)，主要包括做網(wǎng)站、網(wǎng)站設(shè)計、成都App定制開發(fā)、成都小程序開發(fā)、宣傳片制作、LOGO設(shè)計等，幫助客戶快速提升營銷能力和企業(yè)形象，創(chuàng)新互聯(lián)各部門都有經(jīng)驗豐富的經(jīng)驗，可以確保每一個作品的質(zhì)量和創(chuàng)作周期，同時每年都有很多新員工加入，為我們帶來大量新的創(chuàng)意。

css3的動畫功能有以下三種:

1、transition(過度屬性)
2、animation(動畫屬性)
3、transform(2D/3D轉(zhuǎn)換屬性)

下面逐一進行介紹我的理解：

1、transition:<過渡屬性名稱> <過渡時間> <過渡模式>

如-webkit-transition:color 1s;

等同于:

-webkit-transition-property:color;

-webkit-transition-duration:1s;

多個屬性的過渡效果可以這樣寫：

方法1：-webkit-transition:<屬性1> <時間1> ,<屬性2> <時間2> ,。。。

方法2：

-webkit-transition:<屬性1> <時間1>;

-webkit-transition:<屬性2> <時間2>;

transition-timing-function屬性值有5個:

ease:緩慢開始，緩慢結(jié)束

liner:勻速

ease-in:緩慢開始

ease-out:緩慢結(jié)束

ease-in-out:緩慢開始，緩慢結(jié)束（和ease稍有區(qū)別）

實例：
transition過渡效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transition過渡效果</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
left: 0px;
top: 0px;
transition: top 5s ease,left 5s ease ;
-moz-transition: top 5s ease,left 5s ease ; /* Firefox 4 */
-webkit-transition: top 5s ease,left 5s ease ; /* Safari and Chrome */
-o-transition: top 5s ease,left 5s ease ; /* Opera */
}
.btn{
width: 512px;
margin: 0 auto;
border: 2px solid #e3e3e3;
border-radius: 5px;
padding: 10px;
}
.btn button{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
button:last-child{
margin-right: 0px;
}
</style>
<script>
window.onload=function(){
var e1 = document.getElementById("e1");
var e2 = document.getElementById("e2");
var e3 = document.getElementById("e3");
var e4 = document.getElementById("e4");
var e5 = document.getElementById("e5");
var box = document.getElementById("box");
e1.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease";
};
e2.onclick=function(){
box.style.right = 0+"px";
box.style.top = 0+"px";
box.style.transitionTimingFunction="liner";
};
e3.onclick=function(){
box.style.right = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease-in";
};
e4.onclick=function(){
box.style.left = 0+"px";
box.style.top = 0+"px";
box.style.transitionTimingFunction="ease-out";
};
e5.onclick=function(){
box.style.left = 1000+"px";
box.style.top = 100+"px";
box.style.transitionTimingFunction="ease-in-out";
};
}
</script>
</head>
<body>
<div id="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<div class="btn">
<button id="e1">ease</button>
<button id="e2">liner</button>
<button id="e3">ease-in</button>
<button id="e4">ease-out</button>
<button id="e5">ease-in-out</button>
</div>
</body>
</html>

2、動畫屬性animation

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	規(guī)定需要綁定到選擇器的 keyframe 名稱。。
animation-duration	規(guī)定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function	規(guī)定動畫的速度曲線。
animation-delay	規(guī)定在動畫開始之前的延遲。
animation-iteration-count	規(guī)定動畫應(yīng)該播放的次數(shù)。
animation-direction	規(guī)定是否應(yīng)該輪流反向播放動畫。

注釋：Internet Explorer 9 以及更早的版本不支持 animation 屬性。

@keyframes animationname {keyframes-selector {css-styles;}}

值	描述
animationname	必需。定義動畫的名稱。
keyframes-selector	必需。動畫時長的百分比。合法的值： 0-100% from（與 0% 相同） to（與 100% 相同）
css-styles	必需。一個或多個合法的 CSS 樣式屬性。

以百分比來規(guī)定改變發(fā)生的時間，或者通過關(guān)鍵詞 "from" 和 "to"，等價于 0% 和 100%。

0% 是動畫的開始時間，100% 動畫的結(jié)束時間。

例如：

CSS Code復(fù)制內(nèi)容到剪貼板

animation:mymove 5s infinite;
@keyframes mymove{
from{ top:0px; }
to{ top:200px; }
}

還可以這么寫：

CSS Code復(fù)制內(nèi)容到剪貼板

@keyframes mymove{
0%{ top:0px; }
25%{ top:200px; }
50%{ top:100px; }
75%{ top:200px; }
100%{ top:0px; }
}

案例：
css3的animation效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>
<div></div>
</body>
</html>

3、設(shè)置3D場景（即transform）

-webkit-perspective:800;(單位為像素)--即三維物體距離屏幕的距離。

-webkit-perspective-origin:50% 50%;(這個屬性代表了人眼觀察的視野。50% 50%為X軸、Y軸相應(yīng)的位置，即屏幕的正中央。)

　　 css3中怎么實現(xiàn)動畫效果

使用transform屬性調(diào)整元素：-webkit-transform-style:-webkit-perserve-3d;(這個屬性是告訴瀏覽器我們是在一個三維空間中對元素進行操作)

(1)、translate(移動距離)

translateX（x px）

translateY（y px）

translateZ（z px）

(2)、rotate(旋轉(zhuǎn)角度)

rotateX(x deg)

rotateY(y deg)

rotateZ(z deg)

　　 css3中怎么實現(xiàn)動畫效果

transform：rotate（45deg）

rotateX:向屏幕上邊沿向內(nèi)旋轉(zhuǎn)為正方向。

rotateY:向屏幕豎直向下為正方向。

rotateZ:向屏幕外為正方向。

一個div塊，右邊沿向屏幕內(nèi)旋轉(zhuǎn)45deg,即應(yīng)設(shè)置為：Transform：rotateY（45deg）。

實例：

transform3D轉(zhuǎn)換效果

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform3D轉(zhuǎn)換效果</title>
<style>
*{
margin: 0px;
padding: 0px;
}
#box{
width: 200px;
height: 200px;
background-color: chocolate;
position: relative;
left: 0px;
top: 0px;
perspective:800px;
perspective-origin:50% 50%;
transform-style: preserve-3d;
transform-origin:0% 100%;//以Y軸為旋轉(zhuǎn)中心
}
p{
margin:20px 520px;
}
.btn{
width: 300px;
margin: 0 auto;
border: 2px solid #e3e3e3;
border-radius: 5px;
padding: 10px;
}
.btn button{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
margin-right: 20px;
}
button:last-child{
margin-right: 0px;
}
</style>
<script>
window.onload=function(){
var tx = document.getElementById("tx");
var ty = document.getElementById("ty");
var tz = document.getElementById("tz");
var rx = document.getElementById("rx");
var ry = document.getElementById("ry");
var rz = document.getElementById("rz");
var box = document.getElementById("box");
tx.onclick=function(){
box.style.transform = "translateX(500px)";
};
ty.onclick=function(){
box.style.transform = "translateY(400px)"
};
rx.onclick=function(){
box.style.transform = "rotateX(30deg)"
};
ry.onclick=function(){
box.style.transform = "rotateY(30deg)"
};
rz.onclick=function(){
box.style.transform = "rotateZ(30deg)"
};
}
</script>
</head>
<body>
<div id="box"></div>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>
<br>
<br>
<br>
<p>translate(移動距離)</p>
<div class="btn">
<button id="tx">translateX</button>
<button id="ty">translateY</button>
</div>
<p>rotate(旋轉(zhuǎn)角度)</p>
<div class="btn">
<button id="rx">rotateX</button>
<button id="ry">rotateY</button>
<button id="rz">rotateZ</button>
</div>
</body>
</html>

使用transform-origin屬性調(diào)整旋轉(zhuǎn)中心。默認旋轉(zhuǎn)中心點為div盒子的正中心。

這個旋轉(zhuǎn)中心是可以改變的：

X軸：left、center、right.

Y軸：top、center、bottom.

Z軸：length px(一個長度值)。

看完上述內(nèi)容，你們對css3中怎么實現(xiàn)動畫效果有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

本文名稱：css3中怎么實現(xiàn)動畫效果
鏈接URL：http://bm7419.com/article12/jjcddc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、軟件開發(fā)、標簽優(yōu)化、定制網(wǎng)站、定制開發(fā)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容