CSS3 动画记_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

CSS3 动画记_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

css3 动画

　　在CSS3中可以通过animation创建复杂的动画序列，像transition属性一样用来控制CSS的属性实现动画效果。
　　animation实现动画效果主要由两个部分组成。

通过类似Flash动画中的关键帧来声明一个动画。
在animation属性中调用关键帧声明的动画，从而实现一个更为复杂的动画效果。

声明关键帧

　　在CSS3中，把@keyframes称为关键帧。
　　@keyframes的语法规则：命名是由@keyframes开头，后面紧跟着动画的名称(animation-name)，再加上一对花括号"{...}"，括号中是多个不同时间段的样式规则。一个@keyframes中的样式规则是由多个百分比构成的，每个百分比样式规则可以设置不同的样式属性。可以使用关键词“from”，“to”代表一个动画的开始与结束，“from”相当于0%，"to"相当于100%。

@keyframes yxz { 0% {    margin-left: 100px;    background: green; } 40% {    margin-left: 150px;    background: orange; } 60% {    margin-left: 75px;    background: blue; } 100% {    margin-left: 100px;    background: red; }}

　　这里我们定义了一个叫“yxz”的动画，他的动画是从0%开始到100%时结束，从中还经历了一个40%和60%两个过程，上面代码具体意思是：“yxz”动画在0%时元素定位到left为100px的位置背景色为green，然后40%时元素过渡到left为150px的位置并且背景色为orange，60%时元素过渡到left为75px的位置,背景色为blue，最后100%结束动画的位置元素又回到起点left为100px处,背景色变成red。假设置我们只给这个动画有10s的执行时间，那么他每一段执行的状态如下图所示：

　　在@keyframes中的关键帧并不是一定要按照顺序来指定，其实可以任何顺序来指定关键帧，因为动画中的关键帧顺序由百分比值确定而不是声明的顺序。

@keyframes yxz{	0%,40%{		width:200px;		height:200px;	}	20%,60%,80%{		width:100px;		height:100px;	}	100%{		width:0;		height:0;	}}

　　在这个例子中，0%，40%应用了相同的样式，20%，60%，80%也应用了相同的样式，100%时又是另外的样式。
　　这两个动画，因为他们并没有附加到任何元素上，是没有效果的。通过声明@keyframes动画后，要让动画生效，需要通过CSS属性来调用@keyframes声明的动画。

调用关键帧

　　使用动画属性animation调用@keyframes声明的动画。动画属性animation，是一个复合属性，它包含了八个子属性。其语法如下：

animation:[<animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> || <animation-iteration-count> || <animation-direction> || <animation-play-state> || <animation-fill-mode>] *

　　animation-name：主要用来指定一个关键帧动画的名字，这个名字要与@keyframes声明的名称一样。css加载动画时会应用对应的名字来执行。

animation-name:none | IDENT [,none | IDENT] *

　　IDENT：是由@keyframes创建的动画名称。
　　none：默认值，当值为none时，没有任何动画效果，可以用来覆盖动画。

　　animation-duration：主要用来设置动画播放所需要的时间，单位以s(秒)或ms(毫秒),默认值为0。

animation-duration:<time> [,<time>] *

　　animation-timing-function：主要用来设置动画的播放快慢方式。

　　与transition-timing-function类似，可点击查看。

　　animation-delay：主要用来设置动画延迟时间。

animation-duration:<time> [,<time>] *

　　当time为正整数时为延迟时间，负整数时会截断播放时间(把animation-duration所用的时间截断一部分，就是说跳过这部分值，直接进行后面的动画)　　

　　animation-iteration-count：主要用来设置动画播放的次数。

animation-iteration-count: infinite | <number> [,infinite | <number>] *

　　通常为整数，也可以使用浮点数。默认值为1。如果取值为infinite，动画会无限播放。

　　animation-direction：主要用来设置动画播放的方向。

animation-direction:normal | alternate [,normal | alternate] *

　　默认值为normal，动画每次循环都是向前播放。alternate，动画向前播放一次，向后播放一次。

　　animation-play-state：主要用来控制动画播放的状态。

animation-play-state:running | paused [,running | paused] *

　　running是默认值，是播放的意思，可以通过paused停止播放。

　　animation-fill-mode：主要用来设置动画时间之外的属性，也就是动画开始前或者结束后的属性。

animation-fill-mode:none | forwards | backwards | both

　　默认值为none，表示动画按期执行与结束，在动画结束时，会反回初始状态。forwards，当动画结束时，停留在最后最后一帧(保持最后的状态)。backwards，当动画开始时迅速应用第一帧。both，同时拥有forwards与backwards的作用。

学以致用，学习完动画的基础知识后，就需要练习一下，把学的东西用出来。可以把代码复制在浏览器中观看效果。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>    /*元素从左边出现*/    @keyframes bga {        0% {            left: -500px;        }        100% {            left: 0;        }    }    /*元素从下边出来*/    @keyframes bgb {        0% {            top: 350px;        }        100% {            top: 0;        }    }    /*元素从小到大*/    @keyframes bgc {        0% {            transform: scale(0.1);        }        100% {            transform: none;        }    }    /*元素从大到小*/    @keyframes bgd {        0% {            transform: scale(2);        }        100% {            transform: none;        }    }    /*元素旋转并放大*/    @keyframes bge {        0% {            transform: rotate(-360deg) scale(0.1);        }        100% {            transform: none;        }    }    /*选中元素时，隐藏其他元素*/    @keyframes no {        0% {            z-index: 23;        }        100% {            z-index: 23;        }    }    /*兼容webkit浏览器*/    @-webkit-keyframes bga {        0% {            left: -500px;        }        100% {            left: 0;        }    }    @-webkit-keyframes bgb {        0% {            top: 350px;        }        100% {            top: 0;        }    }    @-webkit-keyframes bgc {        0% {            transform: scale(0.1);        }        100% {            transform: none;        }    }    @-webkit-keyframes bgd {        0% {            transform: scale(2);        }        100% {            transform: none;        }    }    @-webkit-keyframes bge {        0% {            transform: rotate(-360deg) scale(0.1);        }        100% {            transform: none;        }    }    @-webkit-keyframes no {        0% {            z-index: 23;        }        100% {            z-index: 23;        }    }    * {        margin: 0;        padding: 0;    }    html, body {        height: 100%;    }    img.bg {        width: 100%;        height: 100%;        position: fixed;        left: 0;    }    .demo div {        position: absolute;        z-index: 9999;    }    a {        display: block;        width: 100px;        height: 100px;        background: rgba(255, 0, 0,.2);        margin-bottom: 15px;        text-decoration: none;        color: #ffffff;    }    #bga:target {        z-index: 100;        -webkit-animation:bga 2s ease;        animation:bga 2s ease;    }    #bgb:target {        z-index: 100;        -webkit-animation:bgb 2s ease;        animation:bgb 2s ease;    }    #bgc:target {        z-index: 100;        -webkit-animation:bgc 2s ease;        animation:bgc 2s ease;    }    #bgd:target {        z-index: 100;        -webkit-animation:bgd 2s ease;        animation:bgd 2s ease;    }    #bge:target {        z-index: 100;        -webkit-animation:bge 2s ease;        animation:bge 2s ease;    }</style></head><body><div class="demo">    <div>        <ul>            <li><a href="#bga">第一张</a></li>            <li><a href="#bgb">第二张</a></li>            <li><a href="#bgc">第三张</a></li>            <li><a href="#bgd">第四张</a></li>            <li><a href="#bge">第五张</a></li>        </ul>    </div>    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i3/2406102577/TB2OH62dFXXXXbDXpXXXXXXXXXX_!!2406102577.jpg"  id="bga" / alt="CSS3 动画记_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i1/2406102577/TB2ER.mdFXXXXXLXXXXXXXXXXXX_!!2406102577.jpg"  id="bgb" / alt="CSS3 动画记_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i2/2406102577/TB2E3IXdFXXXXXbXpXXXXXXXXXX_!!2406102577.jpg"  id="bgc" / alt="CSS3 动画记_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i3/2406102577/TB2M9.idFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg"  id="bgd" / alt="CSS3 动画记_html/css_WEB-ITnose" >    <img  class="bg lazy"  src="/static/imghwm/default1.png"  data-src="https://img.alicdn.com/imgextra/i2/2406102577/TB2VEZidFXXXXbbXXXXXXXXXXXX_!!2406102577.jpg"  id="bge" / alt="CSS3 动画记_html/css_WEB-ITnose" ></div></body></html>

CSS3动画完。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

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：结构，CSS：样式，JavaScript：行为Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML的未来：网络设计的发展和趋势Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

See all articles