Day10_CSS过度动画

背景 : PC和APP项目我们已经开发完毕, 但是再真正开发的时候有些有些简易的动态效果我们可以使用CSS完成 ; 本节课我们来使用CSS完成基础的动画效果

今日学习目标

CSS3过度
CSS3平面动态效果
CSS3动画效果
案例

1. CSS3过渡

含义 :过渡指的是元素从一种状态向另外一种状态进行缓慢的改变, 这种缓慢的效果被称之为过度 ; 过度属于动画的一种, 但是这种动画需要通过鼠标事件才能触发 , 没有鼠标事件是不能触发该属性的;

基本语法 : transition : all 3s linear 5s ;

释义 : transition代表的是过度属性 ( 复合属性 )

all : 代表的是所有能参与过度动画的属性 ;

3s : 代表的是过度动画执行需要花费的时间 ;

linear : 代表的是过度动画的动画类型;

5s : 代表的是过渡到动画的延迟执行;

案例 :

<style>div:hover{width:500px;height:500px;border-radius:50%;backhground-color:green;}div{width:300px;height:300px;background-color:red;border:10px solid gray;/*在这里过度动画放在初始效果里面, 能实现缓慢开始, 缓慢结束, 如果把过度属性放在鼠标事件属性中, 只有缓慢开始没有缓慢结束*/transition:all 3s linear 5s;}
</style>
<div></div>

单一属性 :

transition-property : 所有能参与过度的动画属性; 如果使用单一属性的话, 后面多个属性之间使用逗号隔开, 但是多个属性可以直接使用all代替; 需要注意的是 : display, visibility , 渐变不参与过度 ;

transition-duration : 过度动画需要花费的时间 ;

transition-timing-function : 过度动画执行的类型

取值 :

a) ease : 平滑过渡

b) ease-in : 由慢到快

c) ease-out : 由快到慢

d) ease-in-out : 由慢到快再到慢

e) linear : 线性过渡 , 匀速直线运动

f) steps() : 按照步骤执行

g) 贝塞尔曲线 : cubic-bezier(, , , )

transition-delay: 过度动画的延迟执行 ;
在这里插入图片描述

2. CSS3平面动态交互

含义 : CSS3平面动态效果, 其实就是平面上面的平移 , 旋转 , 缩放 , 倾斜等高级函数 ; 接下来我们要学习四个高级函数 , 但是四个高级函数 , 共用一个属性 : transform属性 ;

注意 : transform也是动画的一种, 这种动画也需要配合鼠标事件才能完成, 如果想要实现缓慢的改变, 则需要配合transition过度动画;

1)平移函数

在这里插入图片描述

含义 : 指的是, 平面X轴和Y轴上面的移动动画

基本语法 : transform : translateX(number) / translateY(number) / translate(x,y)

释义 :

translateX(number) : 代表的是水平平移; 取值+向右平移, 取值-向左平移

translateY(number) : 代表的是垂直平移; 取值+向下平移, 取值-向上平移

translate(x,y) : 代表的是水平和垂直方向平移, 如果取值为一个值, 则只能实现一个方向

案例 :

<style>div:hover{transform:translateX(200px)}div{width:200px;height:200px;border:10px solid gray;background-color:red;/*如果想要实现缓慢的移动, 则需要讲过度属性方法初始效果中*/transition:all linear 3s}
</style>
<div></div>

2)旋转函数

在这里插入图片描述

含义 : 指的是元素能在平面上面进行旋转的动画

基本属性 : transform : rotateX(deg) / rotateY(deg) / rotate(deg)

释义 :

rotateX() : 元素绕着X轴进行旋转 ; 类似于 : 烤全羊 , 水井上面的辘辘

rotateY() : 元素绕着Y轴进行旋转 ; 类似于 : 吊炉烤鸭 ;

rotate() : 元素绕着中心点进行旋转 ; 中心点 ( 位于元素正中心位置 )

问题 : 元素默认是绕着中心点进行旋转, 如果调整旋转中心?

属性 : transform-origin : x y; x代表的是水平位置, y代表的是垂直位置; 旋转中心可以再元素内部, 也可以位于元素外边

注意 : 旋转中心一般需要放在初始效果中 ;

案例 :

<style>div{width:200px;height:300px;background-color:red;margin:100px auto;/*默认的旋转中心再元素正中心位置*//*调增旋转中心*/transform-origin: -20px -20px;}div:hover{transform:rotate(30deg)}
</style>
<div></div>

3)缩放函数

在这里插入图片描述

含义 : 通过平面上面的缩放函数, 来实现元素的缩小和放大

基本语法 : transform : scaleX() / scaleY() / scale()

释义 :

scaleX() : 元素沿着X轴进行缩小放大 : 取值+为x轴方向放大 , 取值-为x轴方向缩小

scaleY() : 元素沿着Y轴进行缩小放大 : 取值+为y轴方向放大 , 取值-为y轴方向缩小

scale() : 元素沿着中心点进行缩小放大 , 取值为一个值的时候, 代表了水平和垂直两个方向, 取值为两个值的时候, 第一个值代表的水平方向, 第二个值代表的是垂直方向;

案例 :

<style>div{width:300px;height:300px;border:10px solid gray;/*如果想要实现缓慢的缩放, 需要配合过度属性*/transition:all 3s linear;}div:hover{/*鼠标放在上面的时候, 元素*/transform:scale(2)}
</style>
<div></div>

4)倾斜函数

在这里插入图片描述

含义 : 倾斜效果类似于旋转 , 但是意义不一样 , 倾斜是沿着都一个轴线进行倾斜 , 就像是军训的时候教官让我们站军姿 , 身体向前倾斜一样 ; 倾斜的时候会与X轴或者是Y轴形成一个夹角

基本语法 : transform : skew() / skewX() / skewY()

释义 :

skew(参数1, 参数2) : 代表的是沿着x轴和y轴进行倾斜, 参数1和参数2代表的是对应倾斜度数

skewX(参数) : 代表的是沿着x轴进行倾斜; 与y轴形成夹角

skewY(参数) : 代表的是沿着Y轴进行倾斜; 与x轴形成夹角
在这里插入图片描述

案例 :

<style>div{width:300px;height:300px;border:10px solid gray;/*如果想要实现缓慢的倾斜, 需要配合过度属性*/transition:all 3s linear;}div:hover{/*鼠标放在上面的时候, 元素*/transform:skewX(30deg)}
</style>
<div></div>

3. CSS3动画

含义 : CSS3里面的动画指的是animation动画 , animation动画是真整意义上的动画, 不依靠鼠标事件就能完成动画的执行 ;

基本语法 : animation : name 5s linear 3s infinite alternate 注意 : animation属性是一个复合属性; 后面的取值均有对应的单一属性

基本释义 :

animation : 是触发动画的属性 , 一般哪里需要调用动画

name : 调用动画 , 声明动画的名字 , 想要使用animation属性必须得声明动画;

5s : 动画执行的时间

linear : 动画执行的类型

3s : 动画延迟执行

infinite : 动画制定的次数, 可以为数值, 数值代表执行多少次, infinite代表的无穷尽的一直执行;

声明动画 :

@keyframes mymove{ from{初始状态属性}to{结束状态属性}
}
或
@keyframes mymove{0%{初始状态属性}100%{结束状态属性}
}（中间再可以添加关键帧）

单一属性 :

animation-name  检索或设置对象所应用的动画名称
animation-duration  检索或设置对象动画的持续时间
animation-timing-function  检索或设置对象动画的过渡类型linear	动画从头到尾的速度是相同的。	测试ease	默认。动画以低速开始，然后加快，在结束前变慢。	测试ease-in	动画以低速开始。	测试ease-out	动画以低速结束。	测试ease-in-out	动画以低速开始和结束。	测试cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay  检索或设置对象动画延迟的时间
animation-iteration-count  检索或设置对象动画的循环次数
animation-direction  检索或设置对象动画在循环中是否反向运动normal：正常方向reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state  检索或设置对象动画的状态running:运动paused: 暂停

4. 案例

<style>*{margin:0;padding:0}div{width:300px;height:300px;background-color:red;/*2)调用动画*/animation:change 3s linear 5s 5 alternate}/*1)声明动画*/@keyframes change{/*初始样式*/0%{/*如果初始样式和默认样式一模一样, 则可以省略不写*/width:300px;height:300px;background-color:red;}/*中间可以添加更多的关键帧;增加多处百分比*//*结束样式*/100%{width:500px;hieght:500px;background-color:green;border-radius:50%;}}/*鼠标悬停的时候,能让动画停止;*/div:hover{animation-play-state:paused}
</style>
<div></div>