css3.0動畫

時間 2019-11-08

標籤 css3.0 css 動畫欄目 CSS 简体版

原文原文鏈接

通常作動畫都使用javascript中的setTimeout()和setInterval()2個函數來製做。如今能夠使用css3中的動畫來製做動畫了，並且css3.0中的動畫使用了GPU來加速會讓動畫看起來更加平滑，順暢。因爲css3.0中的動畫並非全部瀏覽器都支持，所以會有這樣的寫法:@-moz-keyframes 動畫名、@-webkit-keyframes 動畫名、@-o-keyframes 動畫名、@-ms-keyframes 動畫名.javascript

css3.0動畫瀏覽器支持css

Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 規則和 animation 屬性。html

Chrome 和 Safari 須要前綴 -webkit-。java

Internet Explorer 9，以及更早的版本，不支持 @keyframe 規則或 animation 屬性。css3

下面建立一個讓div從左到右再回到左邊的動畫例子:web

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
<style type="text/css">
#box{border:1px solid #000; width:1200px; height:500px; position:relative;}
#move{position:absolute; left:0; top:100px; width:100px; height:100px; background-color:#900; -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;}

@keyframes moveLeft
{
0%   {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}

@-moz-keyframes moveLeft /* Firefox */
{
0%   {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}
}

@-webkit-keyframes moveLeft /* Safari 和 Chrome */
{
0%   {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}

}

@-o-keyframes moveLeft /* Opera */
{
0%   {left:0px;}
25% {left:100px;}
50% {left:200px;}
100% {left:300px;}

}

</style>
</head>

<body>
<div id="box">
    <div id="move"></div>
</div>

</body>
</html>瀏覽器

首先建立一個moveLeft的動畫.函數

在要引用的元素的css裏面增長 -webkit-animation:moveLeft 1s 3;-ms-animation:moveLeft 1s 3;-o-animation:moveLeft 1s 3;animation:moveLeft 1s 3;動畫

animation: myfirst 5s linear 2s infinite alternate;animation:動畫名 動畫緩動時間 動畫方式 動畫時間 執行次數 動畫方向；

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。