動畫效果我們可以用js完成也可以用css3新增的動畫完成，不過在工作中建議能用css完成的動畫就用css別用js
畢竟css渲染的效果比js更好
讓我們先來了解下 css中的動畫知識
動畫是使元素從一種樣式逐漸變化為另一種樣式的效果。
您可以改變任意多的樣式任意多的次數。
要建立 css3 動畫，你需要了解 @keyframes 規則。
@keyframes 規則是建立動畫。
@keyframes 規則內指定乙個 css 樣式和動畫將逐步從目前的樣式更改為新的樣式。
keyframes myfirst
to 0% 是動畫的開始，100% 是動畫的完成。
為了得到最佳的瀏覽器支援，您應該始終定義 0% 和 100% 選擇器。
keyframes myfirst
100%
// 將動畫繫結在 div元素上
div // 執行 myfirst 動畫 在 5s內完成
也可以階段性表示
@keyframes myfirst
25%
50%
100%
下面的**列出了 @keyframes 規則和所有動畫屬性：
屬性描述
css@keyframes
規定動畫。
3animation
所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
3animation-name
規定 @keyframes 動畫的名稱。
3animation-duration
規定動畫完成乙個週期所花費的秒或毫秒。預設是 0。
3animation-timing-function
規定動畫的速度曲線。預設是 "ease"。
3animation-fill-mode
3animation-delay
規定動畫何時開始。預設是 0。
3animation-iteration-count
3animation-direction
3animation-play-state
規定動畫是否正在執行或暫停。預設是 "running"。3
1.完成乙個 正方形在頁面上 形成乙個正方形的移動規則
// div元素
@keyframes translate{ // 定義動畫
0%{background-color: #f00;
left:0;
25%{
background: #0f0;
left:600px;
top:0;
50%{
background: #00f;
left:600px;
top:600px
75%{
background: #ff0;
left:0px;
top:600px;
100%{
background: #f00;
left:0;
top: 0;
div{ // div上應用動畫
width: 200px;
height: 200px;
background-color: #f00;
position: relative;
animation: translate 8s linear 0.5s infinite alternate;// 動畫名稱 持續時間 平滑過渡 延遲5s 迴圈執行動畫 按照原路徑返回
@keyframes xuan{
0% {
transform: rotate(0deg);
100%{
transform: rotate(360deg);
img{
animate:xuan 3s linear 0.5s infinite; // 頁面載入無限滾動
CSS動畫效果
2d 3d 轉換 1 通過2d 3d 轉換，我們能夠對元素進行移動 縮放 轉動 拉長 拉伸。轉換是使元素改變形狀 尺寸和位置的一種效果，可以使用2d或 3d轉換來轉換元素 2 2d transform 屬性 轉換方法的值 1 translate 水平移動 垂直移動 移動 2 rotate 數字 de...
CSS動畫效果
css變形效果 transform translate 平移 translate x,y translatex x translatey y 相對於元素原始位置平移。scale 縮放 大於1放大，小於1縮小。rotate 旋轉 單位 deg度 grad 梯度 rad 弧度 turn 轉 圈 tran...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...