CSS3动画

CSS3动画

网页的动态效果

实现动画效果的四种方式

1. 动态图片
2. Flash
3. CSS动画相关属性
4. JavaScript

实现CSS3动画的三种方式

1. CSS3变形
2. CSS3过渡
3. CSS3动画

CSS3变形 （transform）

每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化

css transform:[transform-function] *;

平移

translate()：平移函数，基于X、Y坐标重新定位元素的位置

语法格式

	translateX（tx）
	表示只设置X轴的位移
	transform:translate(100px,0) = transform:translateX(100px)
	translateY（ty）
	表示只设置Y轴的位移
	transform:translate(0,100px) = transform:translateY(100px)

课堂案例

设置a元素在鼠标移入时向右下角移动4px，8px

缩放

scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

语法格式

	scale(sx,sy);
		横向坐标（宽度）方向的缩放量
		纵轴坐标（高度）方向的缩放量
	scaleX(sx)：表示只设置X轴的缩放
	transform:scale(2,0) = transform:scaleX(2)
	scaleY(sy)：表示只设置Y轴的缩放
	transform:scale(0,2) = transform:scaleY(2)

课堂案例

设置a元素在鼠标移入时放大1.5倍显示

倾斜

可以仅设置沿着X轴或Y轴方向倾斜

语法格式

	skewX(ax)：表示只设置X轴的倾斜
	skewY(ay)：表示只设置Y轴的倾斜

课堂案例

设置a元素在鼠标移入时向左下角倾斜

旋转

元素相对原来中心顺时针旋转,单位使用deg(度)表示

注意:
rotate( )函数只是旋转，而不会改变元素的形状
skew( )函数是倾斜，元素不会旋转，会改变元素的形状

课堂案例

定义动画的状态，鼠标移入旋转

也可以四个同时设置

	transform: skew(15deg)  translate(30px) scale(3.0) rotate(60deg);

练习

制作照片墙

训练要点
使用结构伪类选择器选择元素
使用position定位网页元素
使用div、img元素布局页面
使用2D变形（transform）属性操作图片
需求说明
使用结构伪类选择器选择每一张图片，把它们分别定位到对应的位置
使用transform属性为每张图片设置初始的旋转角度
设置鼠标移入图片特效，当前鼠标移入的图片放大1.5倍、旋转角度变为0°、覆盖在其他图片上面
实现思路
使用div元素整体布局页面，使用img元素排版图片
使用position属性将所有图片全部定位在坐标原点
使用结构伪类选择器分别选择每一张图片，分别把它们定位到不同的位置，再设置不同的旋转度数
鼠标移入图片后，图片放大1.5倍且不旋转

制作旋转按钮
需求说明
使用h1、无序列表、超链接a、img布局页面
使用浮动让列表项排在一行，再清除浮动
鼠标移入每个超链接上，图片旋转360°，放大1.2倍

CSS 过渡

transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等

transition-property 规定设置过渡效果的 CSS 属性的名称。
定义转换动画的CSS属性名称
IDENT：指定的CSS属性（width、height、background-color属性等）
all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
指定浏览器的过渡速度，以及过渡期间的操作进展情况，通过给过渡添加一个函数来指定动画的快慢方式
ease：速度由快到慢（默认值）
linear：速度恒速（匀速运动）
ease-in：速度越来越快（渐显效果）
ease-out：速度越来越慢（渐隐效果）
ease-in-out：速度先加速再减速（渐显渐隐效果）
transition-delay 定义过渡效果何时开始。

格式：

通过一些CSS的简单动作触发样式平滑过渡
常用动作:
伪类触发
：hover
：active
：focus
：checked

实现步骤
1.在默认样式中声明元素的初始状态样式
2.声明过渡元素最终状态样式，如悬浮状态
3.在默认样式中通过添加过渡函数，添加一些不同的样式

练习

照片墙改进
给每张图片添加过渡效果，用伪类hover触发过渡
动画的总时长为0.6s，没有延迟，动画方式为ease-in-out

制作QQ彩贝热销时装页面
需求说明
使用div、无序列表、超链接等标签进行有语义的布局页面结构
鼠标移入图片时，图片向左边位移12px
使用过渡设置动画时间持续1s，动画的方式为ease-out

CSS 动画

animation动画简介
animation实现动画主要由两个部分组成
通过类似Flash动画的关键帧来声明一个动画
在animation属性中调用关键帧声明的动画实现一个更为复杂的动画效果

注意：写兼容的时候浏览器前缀是放在@keyframes中间
例如：@-webkit-keyframes、@-moz- keyframes

动画的播放次数（animation-iteration-count）
值通常为整数，默认值为1
特殊值infinite，表示动画无限次播放
动画的播放方向（animation-direction）
normal，动画每次都是循环向前播放
alternate，动画播放为偶数次则向前播放
动画的播放状态（animation-play-state）
running将暂停的动画重新播放
paused将正在播放的元素动画停下来
动画发生的操作（animation-fill-mode）
forwards表示动画在结束后继续应用最后关键帧的位置
backwards表示会在向元素应用动画样式时迅速应用动画的初始帧
both表示元素动画同时具有forwards和backwards的效果

练习

QQ彩贝导航
训练要点
使用结构伪类选择器选择元素
使用position定位网页元素
使用@keyframes创建关键帧
使用animation属性引用设置的动画

实现思路
给“赚积分”版块设置动画的关键帧
鼠标指针移入后图片由“赚”变为“赚积分”，并且使用关键帧设置动画
设置右边“论”图片。在鼠标指针移入时旋转360°
给“论”图片加上过渡动画效果

需求说明
使用定位属性把图片“赚”和“花”设置到相对应的位置上
使用animation属性给中间的“赚”和“花”图片设置动画，动画效果为鼠标移入“赚”图片的时候变为“赚积分”，并且是从左到右缓慢展开的效果
使用transition属性给右边的“论”图片设置动画，效果为鼠标移入旋转360°