2. 程式人生 > 實用技巧 >CSS3 動畫基本使用

CSS3 動畫基本使用

阿新 • • 發佈：2020-08-27

css 使用 transition（平滑過渡） 、animation （動畫） 、transform （轉換）實現動畫效果。

transition 過渡

CSS3 過渡是元素樣式改變的效果，需要規定希望將效果新增到的CSS屬性和效果的時長。

屬性 描述
transition 簡寫屬性，用於在一個屬性中設定四個過渡屬性。
transition-property 規定應用過渡的 CSS 屬性的名稱。
transition-duration 定義過渡效果花費的時間。預設是 0。
transition-timing-function 規定過渡效果的時間曲線。預設是 "ease"。
transition-delay 規定過渡效果何時開始。預設是 0。

  • transition

    • transition:transition-property transition-duration transition-timing-function transition-timing-delay
    • transion:transition-property transition-duration

  • transition-property

  • transition-timing-function

    值 描述
    linear 規定以相同速度開始和結束的過渡效果（等同於cubic-bezier(0,0,1,1)）。
    ease 慢速開始，然後變快，然後慢速結束（等同於cubic-bezier(0.25,0.1,0.25,1)）。
    ease-in 以慢速開始（等同於cubic-bezier(0.42,0,1,1)）。
    ease-out 以慢速結束（等同於cubic-bezier(0,0,0.58,1)）。
    ease-in-out 以慢速開始和結束（等同於cubic-bezier(0.42,0,0.58,1)）。
    cubic-bezier(n,n,n,n) 在 cubic-bezier 函式中定義自己的值。可能的值是 0 至 1 之間的數值。

例項：

應用於寬度屬性的過渡效果，時長為 2 秒。

div{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s; 
    -moz-transition:width 2s;		/* Firefox 4 */
    -webkit-transition:width 2s;	/* Safari 和 Chrome */
    -o-transition:windth 2s;		/* Opera */
    -ms-transition:width 2s;		/* IE 9 */
}
div:hover{
    width:300px;
}

CSS 屬性改變的典型時間是滑鼠指標位於元素上時，當指標移出元素時，逐漸變回原來的樣式。

animation 動畫

使用 @keyframe 規則建立動畫。在@keyframe中規定某項CSS樣式，結合animation屬性實現動畫效果。

屬性 描述
@keyframes 規定動畫。
animation 所有動畫屬性的簡寫屬性。除了animation-paly-state。
animation-name @keyframe 動畫名稱
animation-duration 完成一個週期所花費的秒或毫秒
animation-timing-function 動畫的速度曲線，預設ease
animation-delay 動畫何時開始
animation-iteration-count 動畫被播放的次數，預設1
animation-direction 動畫是否在下一週期逆向地播放。預設normal
animation-play-state 動畫是否正在執行或暫停。預設running
animation-fill-mode 動畫時間之外的狀態

  • @keyframe 定義和語法

    建立動畫的原理是將一套css 逐漸改變為另一套css。

    以百分比來規定改變的時間，或者通過關鍵字 from 和 to，等價於 0% 和 100%

    語法：

    @keyframes name { keyframe-selector {css-styles;} }

    @-moz-keyframes mymove /* Firefox */
@-webkit-keyframes mymove /* Safari 和 Chrome */
@-o-keyframes mymove /* Opera */
    值 描述
    name 必填。動畫名稱
    keyframe-selector 必填。動畫時長的百分比。合法值：0 - 100%、from（等同0%）、to（等同100%）
    css-styles 必須。一個或多個合法css屬性

    例項：

    /* 兩秒內將div寬度從200px 改變到 300px */
/* 語法一 */
@keyframe widthChange{
    from{ width:200px;},
    to{ width:300px;}
}
/* 語法二 */
@keyframe widthChange{
    0%  { width:200px;},
    50% { width:250px;},
    100%{ width:300px;}
}

div{
    width:200px;
    height:200px;
    background-color:#fff;
    animation:widthChange 2s;
}

  • animation

    按照屬性表中屬性的順序，可以是兩個或者多個。

    例如：animation:animation-name animation-duration 、animation:animation-name animation-duration animation-timing-function

  • animation-timing-function

    同 transition-timing-function 值相同。

  • animation-direction

    值 描述
    normal 預設值。動畫正常播放
    alternate 動畫逆向播放

  • animation-play-state

    值 描述
    paused 規定動畫已暫停。
    running 規定動畫正在播放。

  • animation-fill-mode

    值 描述
    none 不改變預設行為。
    forwards 當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
    backwards 在 animation-delay 所指定的一段時間內，在動畫顯示之前，應用開始屬性值（在第一個關鍵幀中定義）。
    both 向前和向後填充模式都被應用。

transform 轉換

通過轉換，能夠對元素進行移動、縮放、轉動、拉伸或拉長。

新的轉換屬性

下面的表格列出了所有的轉換屬性：

屬性 描述
transform 向元素應用 2D 或 3D 轉換。
transform-origin 允許你改變被轉換元素的位置。

2D轉換

函式 描述 示例
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。 matrix() 方法需要六個引數，包含數學函式，允許您：旋轉、縮放、移動以及傾斜元素。
translate(x,y) 定義 2D 轉換，沿著 X 和 Y 軸移動元素。 值 translate(50px,100px) 把元素從左側移動 50 畫素，從頂端移動 100 畫素。
translateX(n) 定義 2D 轉換，沿著 X 軸移動元素。
translateY(n) 定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y) 定義 2D 縮放轉換，改變元素的寬度和高度。 值 scale(2,4) 把寬度轉換為原始尺寸的 2 倍，把高度轉換為原始高度的 4 倍。
scaleX(n) 定義 2D 縮放轉換，改變元素的寬度。
scaleY(n) 定義 2D 縮放轉換，改變元素的高度。
rotate(angle) 定義 2D 旋轉，在引數中規定角度。 值 rotate(30deg) 把元素順時針旋轉 30 度。
skew(x-angle,y-angle) 定義 2D 傾斜轉換，沿著 X 和 Y 軸。 值 skew(30deg,20deg) 圍繞 X 軸把元素翻轉 30 度，圍繞 Y 軸翻轉 20 度。
skewX(angle) 定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle) 定義 2D 傾斜轉換，沿著 Y 軸。

3D轉換

Opera 不支援 3D 轉換。

  • 轉換屬性

    下面的表格列出了所有的轉換屬性：

    屬性 描述
    transform 向元素應用 2D 或 3D 轉換。
    transform-origin 允許你改變被轉換元素的位置。
    transform-style 規定被巢狀元素如何在 3D 空間中顯示。
    perspective 規定 3D 元素的透視效果。
    perspective-origin 規定 3D 元素的底部位置。
    backface-visibility 定義元素在不面對螢幕時是否可見。

  • 3D 轉換方法

    函式 描述
    matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
    translate3d(x,y,z) 定義 3D 轉化。
    translateX(x) 定義 3D 轉化，僅使用用於 X 軸的值。
    translateY(y) 定義 3D 轉化，僅使用用於 Y 軸的值。
    translateZ(z) 定義 3D 轉化，僅使用用於 Z 軸的值。
    scale3d(x,y,z) 定義 3D 縮放轉換。
    scaleX(x) 定義 3D 縮放轉換，通過給定一個 X 軸的值。
    scaleY(y) 定義 3D 縮放轉換，通過給定一個 Y 軸的值。
    scaleZ(z) 定義 3D 縮放轉換，通過給定一個 Z 軸的值。
    rotate3d(x,y,z,angle) 定義 3D 旋轉。
    rotateX(angle) 定義沿 X 軸的 3D 旋轉。
    rotateY(angle) 定義沿 Y 軸的 3D 旋轉。
    rotateZ(angle) 定義沿 Z 軸的 3D 旋轉。
    perspective(n) 定義 3D 轉換元素的透視檢視。

樣例

滿屏泡泡

滿屏泡泡主要是實現不同大小的多個 3D 球體在螢幕上從下到上的運動的效果。

實現步驟：

  • 畫3D球體

    • 先畫圓
    • 加徑向漸變

  • 動畫

  • js控制

    • 控制每個球體動畫的延遲時間和一個週期時間

    • 控制不同球體的位置、大小、徑向漸變

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>泡泡全屏動畫-demo</title>
	<style type="text/css">
		body{
			background-color: #050647;
			overflow: hidden;
		}
		.circle{
			position: absolute;
			border-radius: 50%;
			top: 100%;
			animation-name: move;
			animation-iteration-count: infinite;		/* 一直迴圈運動 */
			animation-timing-function: linear;
		}
		
        /* 動畫-改變球體的top屬性 */
		@keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
		@-webkit-keyframes move{
			from{ top:100%; }
			to{ top:-40px; }
		}
	</style>
</head>
<body>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	<div class="circle"></div>
	
	<script type="text/javascript">
		var colors = ['#e22571','#8A2BE2','#985525','#45832a','#90afe2'];
        //遍歷每個球體
		var divs = document.querySelectorAll('.circle');
		for (var i = 0; i < divs.length; i++) {
			var index = Math.ceil(Math.random()*colors.length);
			var color = colors[index];
            //設定徑向漸變
			divs[i].style.background = 'radial-gradient(circle at 15px 15px,' + colors[index] + ', #aa2c9e)';
            //設定大小和位置
			var wh = (Math.random()*40 + 10) + 'px';
			divs[i].style.width = wh;
			divs[i].style.height = wh;
			divs[i].style.left = Math.ceil(Math.random()*100) + '%';
            //設定動畫何時開始
			divs[i].style.animationDelay = Math.ceil(Math.random()*6) + 's';
            //設定動畫的一個週期時間
			divs[i].style.animationDuration = Math.ceil(Math.random()*5) + 's';
		}
	</script>
</body>
</html>

心跳

實現步驟：

  • 畫心形

    大概畫圖步驟，先畫一個固定大小的div，使用偽類 after、before 和 position:absolute 構建兩個長方形，之後長方形上邊兩個角使用 border-radius:50% 50% 0 0 控制，然後做 2D旋轉一定角度（transform:rotate(45deg)），最後再填充背景色即可。

  • 動畫

    控制心形在1s內放大兩次。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>心跳</title>
	<style type="text/css">
		.heart{
			margin: 25%;
			width: 200px;
			height: 200px;
			animation: heart 1s infinite;
		}
		.heart:before,.heart:after{
			content: '';
			position: absolute;
			width: 130px;
			height: 200px;
			background: red;
			border-radius:50% 50% 0 0;
		}
		.heart:before{
			right: 0;
			transform: rotate(49deg);
		}
		.heart:after{
			transform: rotate(-49deg);
		}
		
		@keyframes heart{
			0% {transform: scale(1,1); }
			30% {transform: scale(1.1,1.1); }
			50% {transform: scale(1,1); }
			75% {transform: scale(1.1,1.1); }
			80% {transform: scale(1,1); }
			100% {transform: scale(1,1); }
		}
	</style>
</head>
<body>
	<div class="heart"></div>
</body>
</html>

相關推薦

CSS3 動畫基本使用

css 使用 transition（平滑過渡） 、animation （動畫） 、transform （轉換）實現動畫效果。

CSS3動畫效果--2D

知識點一：旋轉 transform: rotate(180deg)//只能傳一個引數，，正值是順時針負值是逆時針

css3 動畫

目錄animation-name 使元素從一種樣式逐漸變化為另一種樣式的效果。 相容性 IE10+、 FireFox6+ Chrome43+、 Safari!9+、 Opera30+、 Android -webkit-

CSS3動畫

1. 涉及動畫的元素最好用塊級標籤，如div ，嚴禁用span i 等行類標籤，用行類標籤導致動畫在ios中不執行而在安卓正常，

css3動畫新增間隔

因專案需要，需要在元素上實現動畫效果，並且需要有動畫間隔。坑爹的是animation-delay只有在第一次動畫開始的時候才起效。

css3動畫 Transition

csstransitions提供了一種在更改css屬性時控制動畫速度的方法。 其可以讓屬性變化成為一個持續一段時間的過程，而不是立即生效的。比如，將一個元素的顏色從白色改為黑色，通常這個改變是立即生效的，使用 CSS trans

CSS3 動畫的實現

任務 我們最近在SeatGeek更新了我們的“跟蹤\"圖示，以匹配我們的新iPhone應用程式。 首席設計師在PSD中建立了具有不同狀態的心臟圖示，並在下面建立了動畫：

CSS3動畫：animation

可以讓頁面中指定的元素按照設定的方式“動”起來，運用的是人視覺延遲的原理，連續地在上一張圖消失之前插入下一張。

css3動畫 實現大資料波紋熱點

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

值得你收藏的10個CSS3動畫工具

人類對於運動的食物往往會投入更多的關注，因此巧妙的使用動畫能夠極大地提升網站的使用者體驗，快速喚起使用者對重要元素的關注。

用 Css3動畫 繪製 水波紋DIV

技術標籤：JavaScript學習前端CSS學習javascriptcss3 效果圖 <!DOCTYPE html> <html>

CSS3動畫--木馬圖

技術標籤：cssjscss3前端html 前言:在學習了上一篇文章CSS3動畫之後,我們今天來做一個木馬圖來練習一下。

css3動畫編寫圖片無縫滾動的效果

技術標籤：css3 css3動畫編寫圖片無縫滾動的效果 程式碼編寫如下 <!doctype html>

css3動畫手勢指引

技術標籤：css3animation <div class="wrapper"> <div class="circle">完善資訊</div>

實現行內文字滾動,法一:css3動畫,法二:js操作dom

技術標籤：小技巧 需求: 因一行內的文字太多,需要滾動以展示所有的文字; 法一 利用css3中的動畫進行展示; 定義動畫:

13 CSS3過渡屬性、CSS3的transform 屬性、CSS3動畫屬性、動畫庫

13 CSS3過渡屬性、CSS3的transform 屬性、CSS3動畫屬性、動畫庫 CSS3過渡屬性 通過CSS3可以在不使用Flash動畫或JavaScript的情況下，為元素從一種樣式變 換為另一種樣式時新增效果。而CSS3過渡就是元素從一種樣式逐

【小5聊】CSS3動畫屬性animation

技術標籤：前端css3動圖animation 【語法】 animation: name duration timing-function delay iteration-count direction;

H5+CSS3動畫彙總(送給物件520的小禮物) 原始碼奉上

#1.實現的動畫效果 圖片用的是我和我物件的，可以自行替換 #2.實現原理 html5+css3進行實現，

css3動畫與js動畫的區別

css與 js動畫 優缺點比較 我們經常面臨一個抉擇：到底使用JavaScript還是CSS動畫，下面做一下對比

CSS3——動畫

介紹 　　CSS3動畫分為三種：過渡、變換、動畫 分類 　　transition 　　　　　作用：偽類被觸發時，屬性變換有過渡的時間