首頁 web前端 html教學 CSS 动画从入门到精通_html/css_WEB-ITnose

CSS 动画从入门到精通_html/css_WEB-ITnose

Jun 24, 2016 am 11:30 AM

## CSS 动画从入门到精通人类的大脑对运动的物体天生敏感。所以为你的网站或者 APP 重要的区域添加动画将会吸引用户的注意力,同时能够让软件用户界面变的更加有趣。   如果动画的效果做得不错,能给软件带来有价值的交互作用和非常有用的反馈、同时能够增强用户的情感体验、带来愉悦的情感并且能够添加充满个性的用户界面。事实上,动画更接地气。  > Emotional design’s primary goal is to facilitate human-to-human communication. If we’re doing our job well, the computer recedes into the background, and personalities rise to the surface.富有感情的设计主要目的是便于人与人之间的沟通交流。如果我们把这项工作做得很好,那么用户与电脑之间的交互将变得更加有趣,而不是冰冷冷的机器。——Aarron Walter, Designing For Emotion  ### 网页创建动画的基本步骤css 动画由两部分组成:-  **Keyframes** 定义动画序列- **Animation Properties** 把 ```@Keyframes```分配到指定的 CSS 元素,并且定义这是一种怎样的动画### 步骤1 : Keyframeskeyframes 是 CSS 动画的基础。它们定义了动画在每一个时间点的动画效果。每一个 @keyframes 由以下几部分组成:- **Name of the animation**:描述动画的名称,例如 ```bounceIn```- **动画帧**:每一个关键帧都用一个百分比来表示。0% 表示动画的初始帧,即就是动画的第一刻;100% 代表动画结束的最后时刻;在初始帧和结束帧之间还可以定义多个关键帧。- **CSS属性**:CSS 属性定义在每个关键帧里面,用来展现动画的效果。  接下来让我们实践以下。我们定义了一个简单的 @keyframes ,姑且命名为 ```bounceIn```,它由三个关键帧组成,分别是:初始帧透明度为0并且使用 CSS 的 ```transform``` 缩小到其大小的10% ;第二个关键帧(60%)的样式是变为全透明并且大小变为120% ;结束帧的样式是慢慢地变变为原来的大小。  在测试的过程中把下面这段代码拷贝到 main.css 文件:```@keyframes bounceIn {  0% {    transform: scale(0.1);    opacity: 0;  }  60% {    transform: scale(1.2);    opacity: 1;  }  100% {    transform: scale(1);  }}```### 步骤2 : 动画属性Once the @keyframes are defined, the animation properties must be added in order for your animation to function.  当 ```@keyframes```定义好了之后,接下来就是添加动画的属性啦。  Animation properties do two things:  总而言之动画属性就干两件事:- 动画属性把 ```@keyframes```绑定在需要添加动画的 HTML 元素上。- 动画属性定义了元素效果如何滚动。  动画属性定义在CSS 选择器中或者需要生成动画效果的  HTML 元素标签上,添加如下两种动画属性让动画效果生效。- ```animation-name```:动画的名称,定义在 @keyframes 上- ```animation-duration```:动画持续的时间,使用秒或者毫秒作为基本单位。  我们继续上面```bounceIn```的例子。把 animation-name 和 animation-duration 两个属性添加到需要添加动画效果的 div 上。  ```div {  animation-duration: 2s;  animation-name: bounceIn;}```上面的那段代码可以简写为:```div {  animation: bounceIn 2s;}```### 动画属性简写每个动画属性都能够被独立定义,考虑代码简洁和清晰,我们提倡使用动画属性简写。所有的动画属性都排列在```animation:```属性中,它们的排列顺序如下:  ```animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction][animation-fill-mode] [animation-play-state];```请注意,为了使添加的动画属性生效,比如按照上面所列的顺序。还有一点需要注意的是 ```animation-name```和```animation-duration```必须定义。  ### 关于浏览器前缀到现在为止,基于 webkit 的浏览器仍然使用 ``` -webkit-```作为 animation,keyframes,transitions 这些属性的前缀。知道这些浏览器厂商按照标准规范之前,我们前端开发者必须在代码中引用各种 Webkit (为了简洁,这篇文章的代码都没有引入 Webkit 前缀)。  包含 Webkit 前缀的 animation 和 Keyframes```div {  -webkit-animation-duration: 2s;  animation-duration: 2s;  -webkit-animation-name: bounceIn;  animation-name: bounceIn;}@-webkit-keyframes bounceIn { /* styles */ }@keyframes bounceIn { /* styles */ }```便于前端开发者,建议使用[bourbon](http://bourbon.io/) CSS 库,其基于 sass 构建,并且保持与各种浏览器前缀同步。使用 bourbon CSS 库之后,生活变得更加简单了。```div {  @include animation(bounceIn 2s);}@include keyframes(bouncein) { /* styles */}```### 一些常见的动画属性除了 animation-name 和 animation-duration 这两个必备的动画属性之外。我们也可以根据我们的需要结合下面的动画属性自定义各种复杂动画效果。- animation-timing-function- animation-delay- animation-iteration-count- animation-direction- animation-fill-mode- animation-play-state  单独看一下这是动画属性的用法吧。  #### animation-timing-function这个属性定义了动画速度,即通过建立加速度曲线,设置动画在关键帧之间是如何变化。该属性值有:```ease```,```linear```,```ease-in```,```ease-out```,```ease-in-out```,```iniyial```,```inherit```  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-timing.gif "在这里输入图片标题")  animation-timing-function 默认值为```ease```,它的变化为刚开始时慢,然后加速,最后减速结束。- linear 从动画开始到结束匀速变化- ease 默认值,动画刚开始时慢,然后加速,最后减速结束动画- ease-in 由慢到快- ease-out 由快到慢- ease-in-out 由慢到快再到慢- initial 把该属性值设置为默认,即设置为```ease```,请查看[initial用法](http://www.w3schools.com/cssref/css_initial.asp)- inherit animation-timing-function属性值继承父元素,请查看[inherit用法](http://www.w3schools.com/cssref/css_inherit.asp)  css 语法```animation-timing-function:ease-in-out```动画简写语法(推荐使用)```animation:[animation-name][animation-duration][animation-timing-function];animation:bounceIn 2s ease-in-out;```#### animation-delay该属性设置延时,即就是页面元素加载完成之后,动画序列开始执行这段时间。例如其值设置为 2s 那么在元素加载完成之后2s 动画才开始执行。如果其值设置为 -2s 那么当元素加载完成之后动画立即开始,但是直到2s后,才进入动画。需要明确的是其值单位为秒或者毫秒。  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-delay.gif "在这里输入图片标题")  css 语法  ```animation-delay: 5s;```动画简写语法(推荐使用)```animation:[animation-name][animation-duration][animation-timing-function][animation-delay]animation: bounceIn 2s ease-in-out 3s;```#### animation-iteration-count该属性定义了动画执行的次数- ```#```整数指定次数- ```infinite```该动画执行无限次- ```inherit``` 该动画执行的次数继承父元素![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-iteration.gif "在这里输入图片标题")  css 语法```animation-iteration-count:2;```动画简写语法(推荐使用)```animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count];animation: bounceIn 2s ease-in-out 3s 2;```#### animation-direction如果动画循环次数大于1次,那么该属性设置了动画执行完成之后是反向运行还是重新回到元素位置运行。- normal 每个循环内动画向前循环,换言之,每个动画循环结束,动画重置到起点重新开始,这是默认属性。- reverse 反向运行动画,每周期结束动画由尾到头运行。- alternate 动画交替反向运行,反向运行时,动画按步后退,同时,带时间功能的函数也反向,比如,ease-in 在反向时成为ease-out。计数取决于开始时是集数迭代还是偶数迭代- alternate-reverse 反向交替, 反向开始交替,当奇数周期时动画从 100% 到 0%,当为偶数周期时,动画从 0% 到 100% 执行。  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-direction.gif "在这里输入图片标题")  css 语法```animation-direction:alternate;```动画简写语法(推荐使用)```animation: [animation-name] [animation-duration] [animation-timing-function][animation-delay] [animation-iteration-count] [animation-direction];animation:  bounceIn 2s ease-in-out 3s 3 alternate;```#### animation-fill-mode该属性动画在开始之前或者结束之后是否可见。该属性有点疑惑,但是当你彻底明白之后,会有很大的作用呢。  默认动画在开始之前或者结束之后,动画的样式是不能影响所绑定元素的样式。但是 animation-fill-mode 属性就是为了改变这一性质。其有如下值:  - backwards 在 animation-delay 所指定的一段时间内,在动画显示之前。动画开始帧(0%)的样式将会应用到绑定的元素中。- forwards 当动画结束之后,绑定的元素保持在结束帧(100%)- both 综合了 backwards 和 forwards 效果。- normal 不改变默认行为  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-fill.gif "在这里输入图片标题")  CSS 语法```animation-fill-mode:forwards```动画简写语法```animation:[animation-name][animation-duration][animation-timing-function][animation-delay][animation-iteration-count][animation-direction][animation-fill-mode];animation: bounceIn 2s ease-in-out 3s forwards;```#### animation-play-state在动画运行周期,该属性设置了动画状态。其值为如下两者:- playing 设置当前动画播放- paused 设置当前动画停止  ![输入图片说明](https://raw.githubusercontent.com/wenweih/articles/master/images/animation-play.gif "在这里输入图片标题")  例如:```.div:hover{  animation-play-state:paused;}```#### 为一个元素绑定多个动画在实际开发过程中若需要为当个元素绑定多个动画,可以使用逗号。```.div{  animation:sideIn 2s,route 1.75s}```最后推荐一个动画库[animate](http://daneden.github.io/animate.css/)
登入後複製

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1666
14
CakePHP 教程
1425
52
Laravel 教程
1328
25
PHP教程
1273
29
C# 教程
1253
24
HTML:結構,CSS:樣式,JavaScript:行為 HTML:結構,CSS:樣式,JavaScript:行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML,CSS和JavaScript的未來:網絡開發趨勢 HTML,CSS和JavaScript的未來:網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來:網絡設計的發展和趨勢 HTML的未來:網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript:比較概述 HTML與CSS vs. JavaScript:比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML:建立網頁的結構 HTML:建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript:比較Web技術 HTML與CSS和JavaScript:比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術:1.HTML定義網頁結構,2.CSS負責網頁外觀,3.JavaScript提供網頁動態和交互性,它們共同作用,打造出用戶體驗良好的網站。

HTML:是編程語言還是其他? HTML:是編程語言還是其他? Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。

從文本到網站:HTML的力量 從文本到網站:HTML的力量 Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言,通過標籤和屬性定義網頁結構和內容。 1)HTML通過標籤組織文檔結構,如、。 2)瀏覽器解析HTML構建DOM並渲染網頁。 3)HTML5的新特性如、、增強了多媒體功能。 4)常見錯誤包括標籤未閉合和屬性值未加引號。 5)優化建議包括使用語義化標籤和減少文件大小。

See all articles