web前端基础教学技术讲解之css3动画学习

关于动画.我们学习分为三大点:

? 一.过渡动画.即 2 d 变换

所谓过渡动画,就是从初始状态过渡到结束状态这个过程中所产生的动画。

? 过渡(transition)本身需要定义参数.否则,看不到效果.我们学到的可定义的参数有以下几点:

? transition-property:规定对哪个属性进行过渡。

? transition-duration:定义过渡的时间,默认是0。

? transition-timing-function:定义过渡动画的缓动效果,如淡入、淡出等。

? linear 规定以相同速度开始至结束的过渡效果。

? ease(默认值)规定慢速开始,然后变快,然后慢速结束的过渡效果。

? ease-in 规定以慢速开始的过渡效果。

? ease-out 规定以慢速结束的过渡效果。

? ease-in-out 规定以慢速开始和结束的过渡效果

? transition-delay:规定过渡效果的延迟时间,即在过了这个时间后才开始动画,默认是0。

?

transform(变形) (2 d中新学到的几个属性)

? 1)缩放变换transform:scale(水平,垂直)

*取值:表示倍数

*变换的基准点在元素中间

*scale-x,scale-y变换不同的轴

? 2)旋转变换 transform:rotate(角度deg)

*顺时针为正方向

*旋转的基准点在元素的中心

*可以取负数

? 3)偏移变换transform:skew(x轴偏移角度,y轴偏移角度)

*transform: skew X x轴偏移以逆时针为正

*transform: skew Y y轴偏移以顺时针为正

? 4)变换的基准点transition-origin:水平方向 垂直方向

*数值,百分比

*方位

? 要想改变元素原有的状态,课堂上老师主要介绍了以上四种方式.当然也还有大小、位置、颜色等属性.

? 在改变状态以后,要想动画能以一种更加舒适的方式去平滑过渡,需要给被改变状态的元素添加过渡()transition)属性.然后还需要给元素定义一个类,也就是需要用户的行为去触发.我们最常用hover的方式去触发.除此之外,还有focus,checked媒体查询等触发方式.

? 过渡动画让页面更加的人性化,大大提升了用户的体验,但是,也有它的缺点,就是需要人为的去触发,所以没办法在网页加载的时候自动发生,而且它是一次性的.没办法重复,最后,它只有两个状态,也就是开始状态和结束状态,我们无法给它定义中间的状态.因此.就有了接下来的关键帧动画.
? 二.关键帧动画.

? 关键帧动画的出现,完美的解决了上述过渡动画的缺点,它既可以定义动画自动发生,也可以无限重复,以及我们可以定义它中间过渡的状态.

? 要实现关键帧动画,我把它分为4个步骤 : 1.通过@keyframs自定义动画 2.通过百分比将动画序列分割成多个节点 3.在各节点中分别定义各属性 4.通过animation将动画应用于相应的元素

? 这里有两个新的属性, @keyframes(关键字) 以及 animation(动画)

? @keyframes的格式为:@keyframes 动画名称 { 时间点 {元素状态} 时间点 {元素状态} …}

? animation属性类似于transition,他们都是随着时间变化而改变元素的属性值,其主要区别在于:transition需要触发一个事件才会随着时间改变其CSS属性;animation在不需要触发任何事件的情况下,也可以显式的随时间变化来改变元素CSS属性,达到一种动画的效果。

同样的,animation也有对应参数,我们主要学习了以下几点:

? animation-duration:默认值为0s,意味着动画周期为0s,也就是没有任何动画效果。

? animation-timing-function:与transition-timing-function一样。

? animation-delay:在开始执行动画时需要等待的时间。

? animation-iteration-count:定义动画的播放次数,默认为1,如果为infinite,则无限次循环播放。

? animation-direction:默认为nomal,每次循环都是向前播放,(0-100)。另一个值为alternate,动画播放为偶数次则向前播放,如果为基数词就反方向播放。

? animation-state:默认为running,播放,paused,暂停。
? 三.3 D变换.

3d变换,在某种程度上,我理解为,相较于2 d变换属性,多了一个Z轴的方向.它可以给用户一种立体的感觉.让动画看起来更加的真实.它同样需要设置一些样式.

比如:transform-style:【flat(默认平面) preserve-3 d保持3 d变换】。

perspective:设置观察的距离,景深.设置值越大,站的位置越远。

如果要实现3 d变换,这两个样式需要同时写,而且都是作用在父元素身上,最后如果想要看到效果,父元素也需要有变换,否则,我们是看不到效果的.

三种方式,各有各的优点.主要是看我们想要一种什么样的效果.然后再去选择用哪种方式去实现.

原文地址:http://blog.51cto.com/14071672/2322768

时间: 11-27

web前端基础教学技术讲解之css3动画学习的相关文章

《web 前端基础到实战系列课程》

<web 前端基础到实战系列课程> 摘要: mod_expires&mod_headers可以减少10%左右的重复请求,让重复的用户对指定的页面请求结果都CACHE在本地,根本不向服务器发出请求. 在使用之前,首先要确认一下"mod_expires"模组是否有启用.如果是自己安装Apache来架设网页主机的话,这里我们可以透过编辑Apache的"httpd.conf"设定档来处理 一.浏览器缓存原理 将该行前面的"#"字号删除

web前端基础知识总结

上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2) lang: 表示整个文档中所使用的语言,en--英文,zh--中文 (3) version:定义创作文档的HTML的标准版本 2.<head></head>用于封装位于文档头部的其他标签 属性: (1) dir:文本的显示方向 (2)  Lang:语言信息 (3)  Prof

web前端各大技术都能实现什么功能

以下是孜然为你总结的web前端开发你必须要一项一项掌握的技术:Html.css.ajax.jquery.extjs.JavaScript,今天为你详细解读他们各自都实现哪些功能? 1AJAX AJAX全称为"Asynchronous Java and XML"(异步Java和XML),是指一种创建交互式网页应用的网页开发技术. 国内通常的读音为"阿贾克斯"和阿贾克斯足球队读音一样. 2jQuery jQuery是继prototype之后又一个优秀的Javascrīp

Web前端基础应用

1.HTML基础 在网络如此发达的今天,大家的生活.学习和工作基本上都离不开网络.大家经常浏览的新闻页面.微博和微信等各种从网上获得信息的途径,不论是PC终端,还是移动客户端,基本上都是以Web为基础来呈现的,因此Web页面呈现信息已成为各种信息共享和发布的主要形式.而HTML(Hyper Text Markup Language,超文本标记语言,在有些书籍中也翻译为超文本标签语言)则是创建Web页面的基础.本书将从HTML文件的基本结构是什么,到使用HTML标签制作简单的网页,一直到最后使用D

web前端基础知识-(八)Ajax

Ajax即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,AJAX = 异步 JavaScript和XML(标准通用标记语言的子集),AJAX 是一种用于创建快速动态网页的技术.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. -----传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页

web前端基础知识整理

1.we标准的理解 (1)Web标准规范要求,书写标签必须闭合.标签小写.不乱嵌套(可提高搜索引擎搜索效率,SEO优化). (2)使用外链css和js脚本,从而达到结构与行为.结构与表现的分离,提高页面的渲染速度,能更快地显示页面的内容. (3)样式与标签的分离,使结构与表现分离,更少的代码和组件, 从而降低维护成本.改版更方便 . (4)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性 . 2.前端页面的三层结构及其作用 结构层(structural layer)由 HTM

web前端基础知识!

[HTML文档的基本结构和语法][基本结构]: <HTML> HTML 文件开始 <HEAD> HTML 文件的头部开始 <title> 网页的标题</title> ...... ...... HTML文件的头部内容 </HEAD> HTML文件的头部结束 <BODY> HTML文件的主体开始 ...... ...... HTML文件的主体内容 </BODY> HTML文件的主体结束 </HTML> HTML文

web前端基础知识

#HTML 什么是HTML,和他ML... 网页可以比作一个装修好了的,可以娶媳妇的房子. 房子分为:毛坯房,精装修 毛坯房的修建: 砖,瓦,水泥,石头,石子.... 精装修的房子:在毛坯房的基础上进行粉刷,覆盖,雕琢,修饰等操作.... HTML标签 相当于盖毛坯房用的石子,砖瓦....:房子成功,但是不会很好看. CSS属性  相当于装修时候使用的刷子,涂料,扣板...: 可以让毛坯房变得更加美观 HTML 超文本标记语言. HyperText Markup Language HTML标签的

web前端基础篇⑨

1.web端.app端 目前实现响应式布局,主要用以下两种方式.CSS原生代码响应式布局 @media screen.bootstrap移动设备优先.自带框架. 兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值 用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据.web和app图不能相同,为了浏览速度最好使用雪碧图. APP端.CSS原生代码写 需要注意:①宽高,使用百分比的方式. ②宽的话,使用rem,不能在一套css里面使用两个

web前端基础篇⑧

1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {color:yellow} 已访问的链接a:hover {color:green} 将鼠标放在链接上a:active {color:blue} 按住链接的时候hover必须放在link和visited后,才有效.active必须放在hover之后,才有效.2.伪元素选择器 也以冒号开始.:first-l