animate个人理解

最新推荐文章于 2024-01-18 08:59:30 发布

keep96

最新推荐文章于 2024-01-18 08:59:30 发布

阅读量1.2k

点赞数 1

分类专栏： h5 css 文章标签： web前端 css3

本文链接：https://blog.csdn.net/keep96/article/details/89890414

版权

h5 css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

动画综合部分

能够使用 CSS3 2D转换、移动、旋转和缩放属性
能够说出透视在3D空间的作用
能够写出如何让子元素开启三维立体环境
能够使用 CSS3 3D转换、移动、旋转和缩放属性
能够使用左手法则
能够使用 CSS3 动画属性
能够定义和使用动画animation
能够写出旋转木马案例
能够写出常见的浏览器私有前缀

2D转换(transform)

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放、变形

控制2D/3D转换的属性为transform属性，transform是一个复合属性，类似于以前学习过的background，下面我们来介绍transform中的功能。

位移(2D)

简介：位移是一种用来改变元素位置的方式，2D位移效果就类似于以前学习的left和top。

回顾以前学习过的改变元素位置的方式有哪些：… 。
transform: translate(x,y)
定义 2D 转换，沿着 X 和 Y 轴移动元素。

基本使用方式:	 
	transform:  translate(length, length); 

例如:
    .box {
        transform: translate(100px, 200px);
    }

总结: 
    1. 最多能设置两个值, 一个值用来改变水平方向,另外一个值用来改变垂直方向
    2. 如果设置两个值,第一个值代表水平,第二值代表垂直
    3. 如果设置一个值,那么元素只能在水平方向移动
    4. 如果希望让元素逆方向移动,可以设置负数
    5. 可以设置百分比值，位移设置的值是相对元素自身宽高的
2D位移方式实现定位元素居中（重点）

以前的设置方式(示例):
width: 150px;
position: absolute;
left: 50%;
margin-left: -75px;
思考这种方式的缺点：… 。

下面为通过transform: translate()方式设置元素居中的代码：
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

旋转

简介：旋转是一种用来让元素根据指定角度进行转动的方式。

transform: rotate(angle)

定义 2D 旋转，在参数中规定角度。

基本使用方式:
	transform: rotate(angle);

例如:
    .box {
        transform: rotate(-45deg);
    }
	
总结: 
    1. 设置的值代表旋转的角度(单位deg)
    2. 通过设置正负数的方式,控制元素顺时针(正数)或者逆时针旋转(负数)
    3. 可以通过transform-origin改变元素的旋转点位置(倾斜),默认值是center
        ✔ 设置方式可以使用以下方式:
            transform-origin: left bottom; 
            transform-origin: 100px 100px;

练习

1. 顺时针旋转,逆时针旋转
2. 旋转和位移练习

缩放

简介：缩放是一种用来按比例改变元素大小的方式。

transform: scale(x,y)

定义 2D 缩放转换，按比例改变元素的宽度和高度。

基本使用方式: 
	transform: scale(sx, sy);

例如:
    .box {
        transform: scale(2, 2);
    }

总结: 
	1. 最多能设置两个值，第一个值用来改变 宽度，另外一个值用来改变 高度。
	2. 设置缩放的时候，每个值都代表的是 倍数，不能带单位。
	4. 如果希望元素缩小，那么设置的值在 0 - 1 之间的小数，如果希望放大，则设置大于1的值。
	5. 不能设置负数
	6. 如果仅设置一个值,代表元素宽度和高度同时放大或者缩小相应的倍数

倾斜(了解)

简介：不可描述，自己看效果体会。

transform: skew(x-angle,y-angle)

定义 2D 倾斜转换，沿着 X 和 Y 轴。

基本使用方式：
	transform: skew(30deg, 45deg);

例如:
    .box {
        transform: skew(30deg, 45deg);
    }

总结: 
	1. 最多能设置两个值，都代表倾斜的角度值(deg)。
	2. 第一个值代表元素沿着水平方向发生倾斜角度（横着扭）, 第二个值代表元素沿着垂直方向发生倾斜角度(竖着扭)
	3. 如果只设置一个值代表沿着水平方向倾斜

transform小结：

注意: transform 是一个复合属性，设置多个值时，需要按照复合属性的写法去写，千万不要设置多次哦~	
		
例如:
transform:  translate(600px)  rotate(360deg) scale(0.5, 0.5);

3D转换(transform)

3D坐标系

☞ 坐标系:
	 x 轴 : 从左向右

	 y 轴: 从上向下

	 z 轴: 指向我们自己的眼睛

☞ 左手法则: （重点，给学生现场演示）
3D转换同样使用复合属性transform，也同样具有位移、旋转、缩放、倾斜功能，但由于3D转换依赖于3D坐标系，所以每个功能操作时都需要明确要进行操作的坐标轴。

位移（分析位移和以前定位移动margin移动区别）

位移是在原来位置的基础上移动位置，不影响其他元素

transform: translateX(n)

 让元素沿着x轴移动
 	设置正数: 从左向右
 	设置负数: 从右向左

transform: translateY(n)

让元素沿着Y轴移动
	设置正数: 从上向下
	设置负数: 从下向上
	
统一总结:
	 1. 3D中的位移也是相对于元素自身位置。
	 2. 3D转换中同样可以设置百分比,依然相对元素自己宽度和高度(后面的Z不能设置百分比)
	 3. 可以通过3D转换方式实现元素居中:
	   position: absolute;
	   left: 50%;
	   top: 50%;
	   transform: translateX(-50%) translateY(-50%);

transform: translateZ(n) - 新效果

让元素沿着Z轴移动
	设置正数: 朝向我们视线移动(靠近我们)
	设置负数: 背向移动(远离我们)
	说明：生活中我们将这种现象称为'近大远小'，元素的与观察点之间的距离不同，看到的元素尺寸也不同，但实际元素自身并没有变化，只是一种'视觉差'导致的。

3D透视

作用：产生'近大远小'的效果
☞ perspective设置方式及取值：
	1. 如果希望看到translateZ()的'近大远小'效果，需要添加透视。
  	2. 给设置了transform属性元素的'直接父元素'设置透视即可
	3. perspective的值可以设置为任意值，但通常推荐设置为600-1000之间

  	根据下图，解释哪段距离是透视的距离：

1537330108012

旋转

我们在2D转换中学习的旋转是绕着点转还是绕着轴转的？

rotateX(angle)
```
沿着x轴旋转
```
rotateY(angle)
```
沿着Y轴旋转
```

rotateZ(angle)

沿着Z轴旋转
	注：3D旋转中沿Z轴旋转的效果与2D转换中的旋转效果一样。

缩放

scaleX()
```
沿着x轴放到或缩小
```
scaleY()
```
沿着Y轴放到或缩小
```

scaleZ()

沿着Z轴放到或缩小
	注意：如果希望看到scaleZ()的效果，该元素必须是立体图形	。

倾斜

skewY()
沿着Y轴倾斜
skewX()
沿着X轴倾斜
子元素保留3D转换

transform-style: flat|preserve-3d;
flat  不保留3d转换
preserve-3d;  子元素保留3d转换

案例：两面翻转的盒子

动画(animation)

☞ animation:(补间动画)   ,  可以让元素始终保存一个动画的效果,不需要用户的动作

语法:
@keyframes 动画序列名称 {
  from {
      开始状态
  }  
  to {
      结束状态
  }
}
或者
@keyframes 动画序列名称 {
  0%{
      开始状态
  }  
  100%{
      结束状态
  }
}

例如:
       .one {
			动画调用
            animation-name: one_move;
            
            动画执行时间
            animation-duration: 2s;
        }

		/* 定义动画集(序列) */
		@keyframes one_move {
			
			/* 设置开始状态 */
			from {
				transform: translateX(0px);	
			}
			
			/* 设置结束状态 */
			to {
			   transform: translateX(800px);
			}
		}



动画属性合写:
	 animation: move  2s infinite  alternate linear 1s;

	 1. 必须设置 animation-name 和  animation-duration

	 2. 没有顺序的要求

动画属性

属性描述
@keyframes 定义动画
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的时间。
animation-timing-function 规定动画的速度曲线。默认是 “ease”。
animation-delay 规定动画何时开始。默认是 0。
animation-iteration-count 规定动画被播放的次数。默认是 1。还有 infinite
animation-direction 动画是否在下一周期逆向地播放。默认是 “normal”，alternate逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。还有“paused”
animation-fill-mode 规定动画结束后状态，保持 forwards 回到起始 backwards
animation 所有动画属性的简写属性

属性	描述
@keyframes	定义动画
animation-name	规定 @keyframes 动画的名称。
animation-duration	规定动画完成一个周期所花费的时间。
animation-timing-function	规定动画的速度曲线。默认是 “ease”。
animation-delay	规定动画何时开始。默认是 0。
animation-iteration-count	规定动画被播放的次数。默认是 1。还有 infinite
animation-direction	动画是否在下一周期逆向地播放。默认是 “normal”，alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是 “running”。还有“paused”
animation-fill-mode	规定动画结束后状态，保持 forwards 回到起始 backwards
animation	所有动画属性的简写属性

案例：旋转木马、大数据热点图、大风车、奔跑的小熊、无缝轮播图案例（根据课堂情况，选择2个案例讲解）

私有前缀(了解)

浏览器厂商通常都是在属性名称前添加厂商的私有前缀，来测试这些尚未成为标准的特性。                     因此，可以借助私有前缀，来解决浏览器对CSS3的兼容性问题。

内核	前缀	主要浏览器
Trident	-ms-	Internet Explorer
Gecko	-moz-	Firefox
Webkit	-webkit-	Chrome、Opera、Safari、Android
Presto	-o-	早期Opera

.box{
    -webkit-transition:all 1s; 
    -moz-transition:all 1s; 
    -ms-transition:all 1s; 
    -o-transition:all 1s; 
    transition:all 1s; 
}
/*推荐使用 先前缀后标准 顺序*/