animation

時間 2019-11-13

標籤 animation 简体版

原文原文鏈接

做者：zccsthtml

經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。web

CSS3 @keyframes 規則

如需在 CSS3 中建立動畫，您須要學習 @keyframes 規則。瀏覽器

@keyframes 規則用於建立動畫。在 @keyframes 中規定某項 CSS 樣式，就能建立由當前樣式逐漸改成新樣式的動畫效果。學習

什麼是 CSS3 中的動畫？

動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果。動畫

您能夠改變任意多的樣式任意多的次數。spa

請用百分比來規定變化發生的時間，或用關鍵詞 "from" 和 "to"，等同於 0% 和 100%。code

0% 是動畫的開始，100% 是動畫的完成。htm

爲了獲得最佳的瀏覽器支持，您應該始終定義 0% 和 100% 選擇器。blog

實例

當動畫爲 25% 及 50% 時改變背景色，而後當動畫 100% 完成時再次改變：圖片

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
-o-animation:myfirst 5s; /* Opera */
}

@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>

<div></div>

<p><b>註釋：</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

相關標籤/搜索

animation

model&animation

android.support.v4.animation

Core Animation

每日一句

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