css3的動畫確實非常絢麗！瀏覽器相容性很重要！。
分享兩個小動畫
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="generator"
content
="editplus®"
>
<
meta
name
="author"
content
="">
<
meta
name
="keywords"
content
="">
<
meta
name
="description"
content
="">
<
title
>c3動畫
title
>
<
style
>
/****************
*/#d1
#d2@-webkit-keyframes jump
25%50%
75%100%
} #d1
@-webkit-keyframes move
50%100%
} #d2
style
>
head
>
<
body
>
<
div
id="d1"
>
div>
<
div
id="d2"
>
div>
body
>
html
>
效果如本部落格首頁那兩個小圓圈！
需要注意的是：
1、在css裡建立動畫時候要處理相容性
2、在呼叫的時候不單要處理相容性》 -webkit-animation: ; -moz-animation: ; -o-animation: ; animation: ;
還要注意animation：animation-name,animation-duration,animation-timing-function,animation-iteration-count
animation-name:是用來定義乙個動畫的名稱
更多專業前端知識，請上
【猿2048】www.mk2048.com
CSS3動畫屬性簡單介紹
css3的動畫屬性 下面的 列出了 keyframes 規則和所有動畫屬性 屬性 描述 css keyframes 規定動畫。3 animation 所有動畫屬性的簡寫屬性，除了 animation play state 屬性。3 animation name 規定 keyframes 動畫的名稱。...
CSS3簡單魔方動畫效果
在魔方效果中我們主要用到的是animation動畫，transition 過渡 transform 變換 首先我們在body裡面下我們需要的標籤元素 這裡也可以用div寫 li li li li li li ul body 寫好後我們在style標籤裡寫我們所需要的的樣式 先給ul設定我們所需要的樣...
簡單了解css3動畫與js動畫
相容性 css3 相容性不好，ie10才開始支援。js相容性好，甚至可以相容ie6。效能 css3 在效能上會稍微好一些，瀏覽器會對css3的動畫做一些優化 新建圖層來跑動畫 移動端的開發也有這種hack，開啟硬體加速，來解決可能的卡頓問題 css webkit transform translat...