css3常用语言-动画

短命女 2021-09-14 06:16 380阅读 0赞

# 一.转换(平移/缩放) #

## 1.transform ##

对元素进行旋转、缩放、移动或倾斜。

transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。

transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形

工具。

变形的顺序是从左到右依次进行

### ①skew(x-angle,y-angle) 倾斜 ###

![20170925150922556][]

### ②translate平移 ###

A.transform:translate(295px,115px)

![20170925150100463][]

B.translate3d(x,y,z)

![20170925150109260][]

### ③scale 缩放 ###

A.transform: scale(sx,sy);如scale(2,2)

![20170925150235686][]

B.scale3d(x,y,z)

### ④rotate(angle) 旋转 ###

A.transform:rotate(45deg);

![20170925150611773][]

只有一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度

转化为矩阵为：matrix(cosθ,sinθ,-sinθ,cosθ,0,0)这个公式

rotate(30deg)= matrix(cos30,sin30,-sin30,cos30,0,0)

B.3d:rotate(x,y,z,angle)

![20170925150745945][]

### ⑤matrix矩阵 ###

（指的是一个方法，书写为matrix()和matrix3d()）

A.matrix(n,n,n,n,n,n)2D平面的移动变换(transform) 矩阵为3\*3。。6个值

matrix(a,b,c,d,e,f)::a和c是缩放的大小（a是x的缩放,c是y轴的缩放）

e和f是表示平移多少(e表示x轴平移多少，f表示y轴平移多少)

b和c表示拉伸多少(b表示x轴倾斜的角度,c表示y轴倾斜的角度)

transform:matrix(0.866,0.5,-0.5,0.866,0,0)

B.matrix3d matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 3D变换，4\*4的矩阵。16个值

2.transform-origin

属性允许您改变被转换元素的位置。

![20170925152247538][]

![20170925152255201][]

![20170925152303437][]

## 3.transform-style ##

属性规定如何在 3D 空间中呈现被嵌套的元素。

该属性必须与 transform 属性一同使用。transform-style：preserve-3d

注意：ie不支持

transform-style: flat(不保存3d效果)|preserve-3d;(3d效果)

## 4.perspective透视效果 ##

目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-

<style>

\#div1\{

position: relative;

height: 150px;

width: 150px;

margin: 50px;

padding:10px;

border: 1px solid black;

perspective:150;

\-webkit-perspective:150; /\* Safari and Chrome \*/

\#div2\{

padding:50px;

position: absolute;

border: 1px solid black;

background-color: yellow;

transform: rotateX(45deg);

\-webkit-transform: rotateX(45deg); /\* Safari and Chrome \*/

</style>

<div id="div2">HELLO</div>

</div>

![20170925153427943][]

## 5.perspective-origin规定 3D 元素的底部位置。 ##

目前浏览器都不支持 perspective 属性。Chrome 和 Safari 支持替代的 -webkit-

## 6.backface-visibility ##

定义元素在不面对屏幕时是否可见。

只有 Internet Explorer 10+ 和 Firefox 支持 backface-visibility 属性。  
Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 属性。

# 二.过渡 #

## transition ##

从一种样式改变为另一种的过程效果

transition：transition-property  transition-duration  transition-timing-function transition-delay  
过渡css属性的名称(或是all)  花费的总时间  速度方式  动画何时开始

注意：不能自行触发，通过hover等动作或结合JS进行触发

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:yellow; transition:width 2s, height 2s; -moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */ -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */ -o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */ } div:hover { width:200px; height:200px; transform:rotate(180deg); -moz-transform:rotate(180deg); /* Firefox 4 */ -webkit-transform:rotate(180deg); /* Safari and Chrome */ -o-transform:rotate(180deg); /* Opera */ } </style> </head> <body> <div>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</div> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body> </html>

# 三.动画 #

ie10,Firefox 以及 Opera 支持 animation 属性。Safari 和 Chrome 支持替代的 -webki

## 1.animation：自动运行 ##

animation：animation-name  animation-duration  animation-timing-function  animation-delay

animation-iteration-count   animation-direction;

keyframe名称 所花费总时间   速度方式   动画何时开始 播放次数  是否反向播放

### ①animation-timing-function 速度方式 ###

linear均速

ease默认。动画以低-加快-慢。

ease-in动画以低速开始。

ease-out动画以低速结束。

ease-in-out动画以低速开始和结束。

cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

### ②animation-iteration-count播放次数 ###

infinite  无限次

### ③animation-direction 是否轮流反向播放动画。 ###

alternate 轮流反向   normal正常播

## 2.@keyframes ##

0%和100%，0%是开始时间  100%结束时间

@keyframes animationname \{

from \{top:0px;\}

to \{top:200px;\}  
\}  
0%和100%，0%是开始时间  100%结束时间

## 3.animation-play-state 动画运行还是暂停 ##

paused规定动画已暂停。  
running规定动画正在播放。

在 JavaScript 中使用该属性，这样就能在播放过程中暂停动画。

## 4.animation-fill-mode  ##

动画在播放之前或之后，其动画效果是否可见

animation-fill-mode : none | forwards | backwards | both;  
none不改变默认行为。  
forwards当动画完成后，保持最后一个状态  
backwards在动画显示之前，开始状态。  
both向前和向后填充模式都被应用。其实跟没有改变状态一样（none）

<!DOCTYPE html> <html> <head> <style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst{ from {background:red; } to {background:yellow;width:300px;} } @-moz-keyframes myfirst /* Firefox */ { from {background:red;} to {background:yellow;width:300px;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { from {background:red;} to {background:yellow;width:300px;} } @-o-keyframes myfirst /* Opera */ { from {background:red;} to {background:yellow;width:300px;} } </style> </head> <body> <div></div> </body> </html>

[20170925150922556]: /images/20210813/12c561eebe5e402fa3a39d87a861325c.png
[20170925150100463]: /images/20210813/5ef5fe16178844fcafee8c52e51dc7bd.png
[20170925150109260]: /images/20210813/5279f651d5ea4967be1cac78911076ec.png
[20170925150235686]: /images/20210813/0372fbbefa874adc97c95cdd8674ec94.png
[20170925150611773]: /images/20210813/c3ca5a09cc274d60a067637cb35fc545.png
[20170925150745945]: /images/20210813/c4bc0cd323fd447183b78c3fae88118d.png
[20170925152247538]: /images/20210813/395e4b464e3c4d389445cade3452754b.png
[20170925152255201]: /images/20210813/1fbbe98f446c411681051a7520c48258.png
[20170925152303437]: /images/20210813/e2ac038bd7d340d4ad24d99414677c41.png
[20170925153427943]: /images/20210813/3d1659cae62340d785fcc796e6c6f93b.png