课程目标
- 掌握CSS3过渡
- 掌握transition的子属性
- 掌握CSS3动画
CSS3过渡
选择器{ transition:property duration timing-function delay }
- tansition属性实现简单的动画效果
- transition属性是一个复合属性,主要包含property、duration、timing-function、delay等子属性
transiton子属性
property:规定应用过渡的CSS属性的名称
取值:
- none:没有属性会获得过渡效果
- all:默认值,所有属性获得过渡效果
- property:定义 应用过渡效果的CSS属性名称列表
duration:定义过渡效果花费的时间
取值:
- time值:以秒或毫秒计,默认是0,意味着没有任何效果
timing-function:规定过渡效果的时间曲线
取值:
- linear:规定以相同速度开始至结束的过渡效果
- ease:规定慢速开始,然后变快,然后慢速结束的过渡效果
- ease-in:规定以慢速开始的过渡效果
- ease-out:规定以慢速结束的过渡效果
- ease-in-out:规定以慢速开始和结束的过渡效果
- cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值
delay:规定开始之前需要等待的时间
取值:
- time值:以秒或毫秒计,默认是0
CSS3变形
transform属性允许对元素应用2D转换,常见的2D转换:
倾斜、移动、旋转、缩放
选择器{ transform:none | transiform-functions }
tansform-functions:用于设置变形函数,可以是一个或多个变形函数列表
div{
transform: rotate(7deg);
}
2D转换常用函数
函数名 | 描述 | 参数说明 |
rotate(angel) | 旋转元素 | Angel是度数值,代表旋转角度 |
skew(x-angel,y-angel) | 倾斜元素 | |
skewX(angel) | 沿着X轴倾斜 | |
skewY | 沿着Y轴倾斜 |
函数名 | 描述 | 参数说明 |
scale(x,y) | 缩放元素,改变元素的高度和宽度 | 代表缩放比例,取值包含正数、负数和小数 |
scaleX | 改变元素的宽度 | |
scaleY | 改变元素的高度 |
函数名 | 描述 | 参数说明 |
translate(x,y) | 移动元素对象,基于x和y坐标重新定位元素 | 元素移动的数值,x代表左右方向,y代表上下方向,向左和向上使用负数,向右和向下使用正数。 |
translateX(x) | 沿着x轴移动元素 | |
translateY(y) | 沿着Y轴移动元素 |
CSS3动画
CSS样式在多个状态中进行转换,主要组成部分是:
- 一组定义的动画关键帧
- 描述该动画的CSS声明
关键帧
关键帧表示动画过程中的一个状态,多个关键帧就可以形成一组绚丽的动画。
关键帧语法规则
@keyframes animationname{ keyframes-selector{css-style} }
- animationname是当前动画的名称
- keyframes-selector:是关键帧选择器
- css-style:当前关键帧的动画状态
animation属性
animation属性,用于设置动画的名称、时间、时间曲线等属性,它是一个复合属性。
选择器{ animation:name duration timing-function delay iteration-count }
tansform-functions:用于设置变形函数,可以是一个或多个变形函数列表
div:hover{
animation: rotate 0.5s
linear infinite
}
animation-name:规定@keyframes动画的名称
取值:
- keyframe name:规定需要绑定到选择器的keyframe的名称
- none:规定无动画效果(可用于覆盖来自级联的动画)
animation-duration:规定动画完成一个周期所花费的时间
取值:
- time值:以秒或者毫秒计算,默认是0
animation-timing-function:规定过渡效果的时间曲线
取值:
- linear:规定以相同速度开始至结束的过渡效果
- ease:规定慢速开始,然后变快,然后慢速结束的过渡效果。
- ease-in:规定以慢速开始的过渡效果
- ease-out:规定以慢速结束的过渡效果
- ease-in-out:规定以慢速开始和结束的过渡效果
- cubic-bezier(n,n,n,n):在 cubic-bezier 函数中定义自己的值。
animation-delay:规定开始之前需要等待的时间
取值:
- time值:以秒或毫秒计,默认是0
animation-iteration-count:规定动画播放的次数
取值:
- n:定义动画播放次数的数值,默认为1
- infinite:规定动画应该为无限次播放