CSS动画-形变
一、transform
CSS transform属性允许对某一个元素进行某些形变, 包括旋转，缩放，倾斜或平移等。
transform是形变的意思，transformer就是变形金刚；
注意事项: 并非所有的盒子都可以进行transform的转换（通常行内级元素不能进行形变）
所以，transform对于行内级非替换元素是无效的；
- 比如对span、a元素等；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.container {
display: inline-block;
border: 5px solid #f00;
}
.container .box {
width: 200px;
height: 200px;
background-color: orange;
transform: translate(100px, 100px);
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
1.transform用法
transform属性的语法如下：
常见的函数transform function有：
- 平移：
translate(x, y) - 缩放：
scale(x, y) - 旋转：
rotate(deg) - 倾斜：
skew(deg, deg)
通过上面的几个函数，我们可以改变某个元素的形变
2.位移 - translate
◼ 平移：translate(x, y)
- 这个CSS 函数用于移动元素在平面上的位置。
translate本身可以表示翻译的意思，在物理上也可以表示平移；
◼ 值个数
- 一个值时，设置x轴上的位移
- 二个值时，设置x轴和y轴上的位移
◼ 值类型：
- 数字：100px
- 百分比：参照元素本身（ refer to the size of bounding box ）
补充：
translate是translateX和translateY函数的简写。- translate3d 后续了解
translate的百分比可以完成一个元素的水平和垂直居中：
translate函数相对于flex布局的兼容性会好一点点- 不过目前flex布局已经非常普及，直接使用flex布局即可；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.container {
display: inline-block;
border: 5px solid #f00;
}
.container .box {
width: 200px;
height: 100px;
background-color: orange;
/* 百分比: 你的百分比是相对于谁? */
/* 不同地方的百分比相对参照物是不一样 */
/* traslate的百分比是相对于自身的 */
/* 如果设置的x位移: 那么参考的是自身的宽度 */
/* 如果设置的y位移: 那么参考的是自身的高度 */
transform: translate(100%, 100%);
/* transform: translate(x, y); */
/* transform: translateX();
transform: translateY(); */
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
3.缩放 - scale
◼ 缩放：scale(x, y)
scale()CSS 函数可改变元素的大小。
◼ 值个数
- 一个值时，设置x轴上的缩放
- 二个值时，设置x轴和y轴上的缩放
◼ 值类型：
- 数字：
- 1：保持不变
- 2：放大一倍
- 0.5：缩小一半
- 百分比：百分比不常用
◼ scale函数时scaleX和scaleY的缩写：
scale3d后续再了解；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 20px solid #f00;
}
.box {
border: 20px solid #0f0;
width: 200px;
height: 200px;
background-color: orange;
/* 形变 */
transform: scale(60%, 60%);
}
.box1 {
border: 20px solid #0f0;
width: 200px;
height: 200px;
background-color: purple;
/* 形变 */
/* 0~1 对元素进行缩小 */
/* 大于1 对元素进行放大 */
/* transform: scale(1.2, 1.2); */
}
.box1:hover {
transform: scale(1.1, 1.1);
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
<div class="container">
<div class="box1">div>
div>
body>
html>
4.旋转 - rotate
◼ 旋转：rotate()
◼ 值个数
- 一个值时，表示旋转的角度
◼ 值类型：
- 常用单位deg：旋转的角度（ degrees ）
- 正数为顺时针
- 负数为逆时针
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 10px solid #f00;
}
.box {
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: rotate(-45deg);
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
5.transform-origin
◼ transform-origin：形变的原点
- 比如在进行scale缩放或者rotate旋转时，都会有一个原点。
◼ 一个值：
- 设置x轴的原点
◼ 两个值：
- 设置x轴和y轴的原点
◼ 必须是
- left, center, right, top, bottom关键字
- length：从左上角开始计算
- 百分比：参考元素本身大小
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
body {
text-align: center;
padding-top: 200px;
}
.container {
display: inline-block;
border: 10px solid #f00;
}
.box {
width: 200px;
height: 100px;
background-color: orange;
/* 修改当前元素的形变的原点位置 */
/* transform-origin: center top; */
/* transform-origin: 20px 20px; */
transform-origin: 10% 10%;
}
.box:hover {
transform: rotate(45deg) scale(0.5);
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
6.倾斜 - skew
◼ 倾斜：skew(x, y)
- 函数定义了一个元素在二维平面上的倾斜转换。
◼ 值个数
- 一个值时，表示x轴上的倾斜
- 二个值时，表示x轴和y轴上的倾斜
◼ 值类型：
- deg：倾斜的角度
- 正数为顺时针
- 负数为逆时针
◼ 注意：倾斜的原点受transform-origin的影响
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
font-style: italic;
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
transform: skew(10deg, 10deg);
}
style>
head>
<body>
<div class="box">我是div元素div>
body>
html>
7.transform设置多个值
◼ 前面我们看到了 transform 的语法，它是可以设置多个transform-function的：
- 那么就意味着，我们可以给transform设置多个形变的函数；
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 100px;
background-color: orange;
}
.box:hover {
/* transform: translateX(50px);
transform: scale(1.2);
transform: rotate(45deg); */
/*
+
+: 一个或者多个, 并且多个之间以空格分隔
transform: scale() translate();
#
#: 一个或者多个, 多个之间以, 分隔
box-shadow: 1px 1px 1px 1px #f00,
*/
transform: translate(50px) scale(1.2) rotate(45deg);
}
style>
head>
<body>
<div class="box">div>
body>
html>
二、垂直居中总结
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.container {
/* position: relative; */
/* display: flex;
align-items: center; */
height: 300px;
background-color: orange;
}
.box1 {
position: absolute;
width: 100px;
/* height: 100px; */
top: 0;
bottom: 0;
margin: auto 0;
background-color: #f00;
}
.box2 {
background-color: #f00;
}
.box3 {
display: inline-block;
height: 100px;
background-color: #f00;
/* 两件事情:
1.让元素向下位移父元素的50%
2.让元素向上位移自身的50%
*/
/* margin-top的百分比是相对于包含块(父元素)的宽度 */
/* margin-top: 50%; */
position: relative;
top: 50%;
transform: translate(0, -50%);
}
style>
head>
<body>
<div class="container">
<div class="box3">coderdiv>
aaaaa
div>
body>
html>
三、transition动画
1.认识transition动画
◼ 什么是transition动画呢？
- CSS transitions 提供了一种在更改CSS属性时控制动画速度的方法。
- 可以让CSS属性变化成为一个持续一段时间的过程，而不是立即生效的；
- 比如将一个元素从一个位置移动到另外一个位置，默认在修改完CSS属性后会立即生效；
- 但是我们可以通过CSS transition，让这个过程加上一定的动画效果，包括一定的曲线速率变化；
◼ 通常将两个状态之间的过渡称为隐式过渡（implicit transitions），因为开始与结束之间的状态由浏览器决定。
◼ CSS transitions 可以决定
- 哪些属性发生动画效果 (明确地列出这些属性)
- 何时开始 (设置 delay）
- 持续多久 (设置 duration)
- 如何动画 (定义timing function，比如匀速地或先快后慢)。
2.哪些CSS属性可以做动画呢？
◼ 并非所有的CSS属性都可以执行动画的，那么我们如何知道哪些属性支持动画呢？
◼ 方法一：在MDN可执行动画的CSS属性中查询
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_animated_properties
◼ 方法二：阅读CSS属性的文档说明
3.过渡动画 - transition
◼ transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简 写属性。
◼ transition-property：指定应用过渡属性的名称
- all：所有属性都执行动画；
- none：所有属性都不执行动画；
- CSS属性名称：要执行动画的CSS属性名称，比如width、left、transform等；
◼ transition-duration：指定过渡动画所需的时间
- 单位可以是秒（s）或毫秒（ms）
◼ transition-timing-function：指定动画的变化曲线
- https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function
◼ transition-delay：指定过渡动画执行之前的等待时间
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.container {
background-color: #f00;
}
.box {
position: relative;
left: 0;
width: 200px;
height: 100px;
background-color: orange;
/* 告知浏览器 box 在进行一些CSS属性变化的时候有一个过渡效果 */
/* transition-property: transform, left; */
/* transition-property: all;
transition-duration: 1s;
transition-timing-function: ease-in;
transition-delay: 1s; */
/* 简写属性 */
transition: all 1s ease-in 1s;
}
.container:hover .box {
left: 100px;
transform: translate(100px);
width: 500px;
}
style>
head>
<body>
<div class="container">
<div class="box">div>
div>
body>
html>
四、Animation 动画
1.认识Animation
◼ 之前我们学习了transition来进行过渡动画，但是过渡动画有如下的缺点：
- transition 只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态；
- transition 不能重复执行，除非一再触发动画；
- transition 需要在特定状态下会触发才能执行，比如某个属性被修改了；
◼ 如果我们希望可以有更多状态的变化，我们可以使用 CSS Animation。
◼ CSS Animation的使用分成两个步骤：
-
步骤一：使用 keyframes 定义动画序列（每一帧动画如何执行）
-
步骤二：配置动画执行的名称、持续时间、动画曲线、延迟、执行次数、方向等等
◼ 接下来我们一个个步骤来学习。
2.@keyframes规则
◼ 可以使用@keyframes来定义多个变化状态，并且使用animation-name来声明匹配：
- 关键帧使用
percentage来指定动画发生的时间点； - 0%表示动画的第一时刻，100%表示动画的最终时刻；
- 因为这两个时间点十分重要，所以还有特殊的别名：from和to；
◼ 也就是说可以使用from和to关键字：
- from相当于0%
- to相当于100%
3.animation属性
◼ CSS animation 属性是 animation-name，animation-duration, animation-timing-function，animation-delay，animation-iteration-count，animation-direction，animation-fill-mode 和 animation-play-state 属性的一个简写属性形式。
◼ animation-name：指定执行哪一个关键帧动画
◼ animation-duration：指定动画的持续时间
◼ animation-timing-function：指定动画的变化曲线
◼ animation-delay：指定延迟执行的时间
◼ animation-iteration-count：指定动画执行的次数，执行infinite表示无限动画
◼ animation-direction：指定方向，常用值normal和reverse
◼ animation-fill-mode：执行动画最后保留哪一个值
- none：回到没有执行动画的位置
- forwards：动画最后一帧的位置
- backwards：动画第一帧的位置
◼ animation-play-state：指定动画运行或者暂停（在JavaScript中使用，用于暂停动画）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
.box {
width: 200px;
height: 100px;
background-color: orange;
/* box要执行moveAnim的动画 */
animation-name: moveAnim;
animation-duration: 3s;
animation-timing-function: ease-in-out;
/* 其他属性: */
/* 动画执行的次数 */
/* animation-delay: 2s; */
/* animation-iteration-count: 2; */
/* animation-direction: reverse; */
/* 元素停留在动画的哪一个位置 */
/* animation-fill-mode: forwards; */
/* js动态修改 */
/* animation-play-state: paused; */
animation: moveAnim 3s linear 1s 2 normal forwards, ;
}
@keyframes moveAnim {
0% {
transform: translate(0, 0) scale(0.5, 0.5);
}
33% {
transform: translate(0, 200px) scale(1.2, 1.2);
}
66% {
transform: translate(400px, 200px) scale(1, 1);
}
100% {
transform: translate(400px, 0) scale(0.5, 0.5);
}
}
style>
head>
<body>
<div class="box">
div>
body>
html>