【CSS】H9_CSS变形transform、过渡transition、CSS3动画 animation

【CSS】H9_CSS变形transform、过渡transition、CSS3动画 animation
文章目录
- CSS变形
- 1、CSS3变形transform
  变形函数：
  2D位移translate
  一个方向上的偏移
  2D缩放scale
  2D倾斜skew
  2D旋转rotate
  
  2、CSS过渡transition
  概念：
  过渡属性：
  1.transition-property
  2.transition-duration
  3.transition-timing-function
  4.transition-delay
  
  3、CSS3动画 animation
  关键帧语法：
  调用关键帧：
CSS变形

 1、CSS3变形transform
- 如平移、旋转、缩放、倾斜效果
- 每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化
```
transform:[transform-function]*;
1
2
```
变形函数：

translate()：平移函数，基于X、Y坐标重新定位元素的位置

scale()：缩放函数，可以使任意元素对象尺寸发生变化

rotate()：旋转函数，取值是一个度数值

skew()：倾斜函数，取值是一个度数值

2D位移translate
```
translate(tx,ty);
1
2
3
4
5
6
```
一个方向上的偏移
- translateX（tx）表示只设置X轴的位移
  
  transform:translate（100px,0）-------transform:translateX（100px）
- translateY（ty）表示只设置Y轴的位移
  
  transform:translate（0,100px）-------transform:translateY（100px）
2D缩放scale
```
scale(sx,sy);
1
2
3
4
5
```
scale()函数可以只接收一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等
- scaleX（sx）表示只设置X轴的缩放
  
  transform:scale（2,0）-------transform:scaleX（2）
- scaleY（sy）表示只设置Y轴的缩放
  
  transform:scale（0,2）-------transform:tscaleY（2）
2D倾斜skew

元素不会旋转，会改变元素的形状
```
skew(ax, ay);
1
2
3
4
5
```
可以仅设置沿着X轴或Y轴方向倾斜：
- skewX（ax）：表示只设置X轴的倾斜
- skewY（ay）：表示只设置Y轴的倾斜
2D旋转rotate

只是旋转，而不会改变元素的形状

deg是CSS中的一个角度单位,表示度(Degress),一个圆共360度。
```
rotate(a);

1
2
3
```
2、CSS过渡transition

概念：
- transition呈现的是一种过渡，是一种动画转换的过程，如渐现、渐弱、动画快慢等
- CSS3 transition的过渡功能更像是一种“黄油”，通过一些CSS的简单动作触发样式平滑过渡
过渡属性：
```
transition:[transition-property  
			transition-duration  
			transition-timing-function   
			transition-delay ] 
1
2
3
4
```
1.transition-property
- 过渡或动态模拟的CSS属性；
- IDENT：指定的CSS属性（width、height、background-color属性等）
- all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all
2.transition-duration
- 完成过渡所需要的时间；
- 定义转换动画的时间长度，即从设置旧属性到换新属性所花费的时间，单位为秒（s）
3.transition-timing-function
- 指定过渡函数；
- 给过渡添加一个函数来指定动画的快慢方式
```
  ease：速度由快到慢（默认值）

  inear：速度恒速（匀速运动）

  ease-in：速度越来越快（渐显效果）

  ease-out：速度越来越慢（渐隐效果）

  ease-in-out：速度先加速再减速（渐显渐隐效果）
1
2
3
4
5
6
7
8
9
```
4.transition-delay
- 过渡开始出现的延迟时间
  正值：元素过渡效果不会立即触发，当过了设置的时间值后才会被触发
  负值：元素过渡效果会从该时间点开始显示，之前的动作被截断
  0：默认值，元素过渡效果立即执行
```
<style type="text/css">
	div{
		width: 100px;
		height: 100px;
		background-color: red;
		transition: all 0.1s ease-in-out;
		-webkit-transition: all 0.1s ease-in-out;
	}
	div:hover{
		width: 300px;
		height: 300px;
	}
	style>
	<body>
		<div>div>
	body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
```
3、CSS3动画 animation

1.animation动画：需要关键帧，并且在animation中调用关键帧

2.写兼容的时候浏览器前缀是放在@keyframes中间：

例如：@-webkit-keyframes、@-moz- keyframes。

关键帧语法：
```
<style type="text/css">
    div{
        width: 50px;
        height: 50px;
        background-color: red;
        animation: divtranslate 1s infinite;
        调用下面的名字

    }
    自定义名字
    @keyframes divtranslate{
        0%{
            transform: translate(0px,0px);
        }
        25%{
            transform: translate(300px,0px);
        }
        50%{
            transform: translate(300px,300px);
        }
        75%{
            transform: translate(0px,300px);
        }
        100%{
            transform: translate(0px,0px);
        }
	}
style>
<body>
	<div>div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
```
```
<style>
    
	.div1{
        height: 100px;
        width: 200px;
        background: url(img/bear-25676f9.png);
        animation: test 1s steps(8) infinite;
	}
    @keyframes test{
        from{background-position-x: 0;}
        to{background-position-x: -1600px;}
    }
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
```
调用关键帧：

动画的播放次数（animation-iteration-count）

值通常为整数，默认值为1

特殊值infinite，表示动画无限次播放

动画的播放方向（animation-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

running将暂停的动画重新播放

paused将正在播放的元素动画停下来

动画发生的操作（animation-fill-mode）

forwards表示动画在结束后继续应用最后关键帧的位置

backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

-direction）

normal，动画每次都是循环向前播放

alternate，动画播放为偶数次则向前播放

动画的播放状态（animation-play-state）

running将暂停的动画重新播放

paused将正在播放的元素动画停下来

动画发生的操作（animation-fill-mode）

forwards表示动画在结束后继续应用最后关键帧的位置

backwards表示会在向元素应用动画样式时迅速应用动画的初始帧

both表示元素动画同时具有forwards和backwards的效果
相关阅读:
Spring Bean的生命周期理解
 韩顺平0基础学Java——第27天
 SVN 服务器建立
 搜索与图论：染色法判别二分图
 Java.lang.Class类 getDeclaredAnnotations()方法有什么功能呢？
DevOps 装配线如何加速流水线移动
 MySQL优化（三）回表详解
 CANoe-vTESTstudio之Test Diagram编辑器（元素介绍）
【数据结构】二叉搜索树的原理及其实现
 apache log4j2vulfocus靶场漏洞复现
原文地址：https://blog.csdn.net/m0_70083523/article/details/127766716

文章目录

CSS变形

1、CSS3变形transform

变形函数：

2D位移translate

一个方向上的偏移

2D缩放scale

2D倾斜skew

2D旋转rotate

2、CSS过渡transition

概念：

过渡属性：

1.transition-property

2.transition-duration

3.transition-timing-function

4.transition-delay

3、CSS3动画 animation

关键帧语法：

调用关键帧：