css3的动画
分类: 2d 动画 ,3d 动画, 2d转3d,过渡动画和帧动画
《一》2d转换:transfrom
转换可以可以对元素进行移动、缩放、转动、拉长或拉伸。
属性 | 描述 |
---|---|
translate() | 平移(沿x,y,z轴方向平移 px) |
rotate() | 旋转(沿x,y,z轴方向平移 deg) |
scale() | 放大 |
skew | (变形 deg) |
translate():
根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。
默认旋转x 轴
translatex(100px):沿x轴向右平移100px。
transform:translatex(100px); transform:translatey(100px); transform:translatey(100px);
rotate():
在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。
默认旋转z 轴
rotatey(45deg):沿y轴顺时针旋转45度。
transform: rotatey(45deg);
transform: rotatex(45deg);
transform: rotatey(45deg);
div
{
margin:50px auto;
width:100px;
height:100px;
background-color: #ff4fe0;
border:1px solid black;
}
.hi
{
transform: rotatex(45deg);
}
</style>
</head>
<body>
<div>i miss you </div>
<div class="hi">i miss you </div>
scale():
该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数
scale(1.5,2)转变宽度为原来的大小的1.5倍,高度为原来的2倍
transform: scale(1.5,2);
skew():
包含两个参数值,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。
skewX();表示只在X轴(水平方向)倾斜。
skewY();表示只在Y轴(垂直方向)倾斜。
skew(-45deg):X轴倾斜
div
{
margin:50px auto;
width:100px;
height:100px;
background-color: #ff4fe0;
border:1px solid black;
}
.hi
{
transform:translatey(100px);
/*-webkit-transform:skew(30deg,20deg); /!* Safari and Chrome *!/*/
}
</style>
</head>
<body>
<div>i miss you </div>
<div class="hi">i miss you </div>
</body>
css3的旋转中心:transform-origin
transform-origin: center;
transform-origin: top left;
transform-origin: 50px 50px;
transform-origin: bottom right 60px;
transform-origin属性可以使用一个,两个或三个值来指定,其中每个值都表示一个偏移量。
- 一个值:
必须是,,或 left, center, right, top, bottom关键字中的一个。 - 两个值:
其中一个必须是,,或left, center, right关键字中的一个。
另一个必须是,,或top, center, bottom关键字中的一个。 - 三个值:
前两个值和只有两个值时的用法相同。
第三个值必须是。它始终代表Z轴偏移量。
keyword | value |
---|---|
left | 0% |
center | 50% |
right | 100% |
top | 0% |
bottom | 100% |
一个小案例 图片放大:
<style>
.b{
width: 400px;
height: 500px;
margin: auto;
overflow: hidden;
}
.b>img{
width: 300px;
height: 200px;
transition: all .5s linear;
}
.b:hover img{
transform: scale(1.5);
}
《二》过渡动画:transition
元素从一种样式逐渐改变为另一种的效果(属性的过渡)
规定两项内容:
- 指定要添加效果的CSS属性
- 指定效果的持续时间
属性 | 描述 |
---|---|
transition-delay | 动画的延迟时间 |
transition-duration | 动画的执行时间 |
transition-timing-function | 动画的执行方式 |
transition-property | 过渡的属性 |
简写的 transition 属性
transition: width 1s linear 2s;(属性 执行时间 执行方式 延迟时间 )
transition-timing-function:动画的执行方式:
linear 匀速
ease-in 慢慢开始
ease-in-out 慢开始慢结束
transition-property :过渡的属性
如果要过渡多个属性,就分开写
all: 过渡所有属性
.b
{
margin:50px auto;
width:100px;
height:100px;
background: #54ffcf;
margin-left: 0;
/*/!* transition-delay 动画的延迟*!/
transition-delay:1s;
/!*transition-duration 动画的执行时间*!/
transition-duration: 1s;
/!* transition-timing-function动画的执行方式 linear 匀速 ease-in 慢开 ease-in-out 慢开慢关*!/
transition-timing-function: linear;
/!* transition-property 过渡什么属性 margin-left 如果要过渡多个属性 分开 all 过渡所有属性*!/
transition-property:margin-left;*/
transition: margin-left 1s 1s linear;
}
.b:hover{
margin-left: 50px;
}
</style>
</head>
<body>
<div class="b">