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

时间: 2024-11-05 10:51:00

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

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

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

进击的Python【第十三章】:Web前端基础之HTML与CSS样式

进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf-8 import socket def handle_request(client): buf = client.recv(1024) client.send("HTTP/1.1 200 OK\r\n\r\n")

web前端基础知识学习网站推介

内容:一.基础知识及学习资料1. HTML入门学习:http://www.w3school.com.cn/html/index.aspHTML5 入门学习:http://www.w3school.com.cn/html5/index.asp 2. CSS入门学习:http://www.w3school.com.cn/css/index.aspCSS3入门学习:http://www.w3schools.com/css3/default.asphttp://css3-tutorial.com/ 3.

web前端入门到实战:用css3实现惊艳面试官的背景即背景动画(高级附源码)

我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易.这篇文章就让我们汇总一下使用Css3实现的各种特效. 1.实现内部虚线边框知识点:outline 核心代码 .dash-border{ width: 200px; height: 100px; line-height: 100px; outline: 1px dashed #fff; outline-o

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前端基础(CSS position的正确用法)

position属性的relative以及absolute的区别是什么? 任何元素的默认position的属性值都为static(静态),但我们在布局的时候也会经常用到relative(相对)以及absolute(绝对)这两种属性. 再分别介绍两种属性之前,我们一定要记住一个重要结论:如果用position来进行布局,父级元素的position属性必须为relative,而定位于父级内部某个位置的元素,最好用absolute,因为它不受父级元素padding的属性影响,当然也可以用relativ

web前端基础案例-开发QQ空间旋转时光轴

知识点:html标签,css样式属性,代码优化,行业规范,布局思路,javascript基础,jquery方法,逻辑思维.html代码: <div class="con"> <div class="top"> <img src="images/my.jpg" height="667" width="500" alt="关键词" /> <p>

【WEB前端开发】新手入门:html语言学习的7个秘诀

WEB前端开发学习过程中,作为一个新手入门级别的菜鸟你,要如何系统的学习呢 ? 本期为介绍其一: html语言学习的7个秘诀 也就是说如何学习HTML语言. 新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的.最该先学的. 我们有很多的选择,但你不能说那种语言"最好".我们应该理解:说到底,什么语言并不重要. 重要的是理解数据结构.控制逻辑和设计模式. 任何一种语言-甚至一种简单的脚本语言-都会具有所有编程语言都共有的各种特征,也就是说各种语言是贯通的. 我编程使用Pascal,