css3常用语言-动画

来源：互联网发布：淘宝上可靠的眼镜店编辑：程序博客网时间：2024/06/08 01:05

一.转换(平移/缩放)

1.transform

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

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

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

工具。

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

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

②translate平移

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

B.translate3d(x,y,z)

③scale 缩放

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

B.scale3d(x,y,z)

④rotate(angle) 旋转

A.transform:rotate(45deg);

只有一个参数“角度”，单位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)

⑤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

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

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>

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>

阅读全文

0 0