Day10_CSS过度动画

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

今日学习目标

1. CSS3过度
2. CSS3平面动态效果
3. CSS3动画效果
4. 案例

1. CSS3过渡

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

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

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

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

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

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

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

​ 案例 :

<style>css">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>css">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>css">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>css">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>css">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>css">*{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>

5. 综合案例

案例1 : 平移案例

案例2 : 旋转案例

案例3 : 缩放案例

案例4 : 动画案例

案例5 : 关键帧动画