css变换与动画详解

举个栗子:
--------元素整体居中
.box{
     position:absolute;top:50%;left:50%;
    width:50px;
    height:50px;
    transform:translate(-50%,-50%);
    background:gray;
}
1.translate:移动,是transform的一个方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);

2.transform:变形,改变
CSS3中主要包括:
在CSS3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转:rotate() 顺时针旋转给定的角度,允许负值 rotate(30deg)
扭曲:skew() 元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:skew(30deg,20deg)
缩放:scale() 放大或缩小,根据给定的宽度(X 轴)和高度(Y 轴)参数: scale(2,4)
移动:translate() 平移,传进 x,y值,代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起: matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;
transform: rotate 旋转| scale 缩放| skew扭曲 | translate移动 |matrix矩阵变形;
综合起来使用:transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开

3.transition: 允许CSS属性值在一定的时间区间内平滑的过渡。(过渡动画)

Transition作用是指定了某一个属性(如width、left、transform等)在两个值之间如何过渡。
如果某一个元素指定了Transiton,那么当其某个属性改变的时候就会按照Transition指定的方式进行过渡,动画就这么产生了。
transition主要包含四个属性值:
(1)执行变换的属性:transition-property;
(2)变换延续的时间:transition-duration;
(3)在延续时间段,变换的速率变化:transition-timing-function  //例:平缓进入、先快后慢;
(4)变换延迟时间:transition-delay。
需要事件的触发,例如单击、获取焦点、失去焦点等。
语法:transition:property duration timing-function delay;
例如:transition:width 2s ease 0s;

4.Animation
Animation也是通过指定某一个属性(如width、left、transform等)在两个值之间如何过渡来实现动画的,
与Transition不同的是:
1.Animation可以通过keyframe显式控制当前帧的属性值,而Transition只能隐式来进行
(不能指定每帧的属性值),所以相对而言Animation的功能更加灵活;
2.Animation通过模拟属性值改变来实现动画,动画结束之后元素的属性没有变化;而Transition确实改变了元
素的属性值,动画结束之后元素的属性发生了变化;这一点,这在实际应用中会产生很大的区别。
Animation模块包括了animation-name、animation-duration、animation-timing-function、
animation-delay、animation-iteration-count、animation-play-state等属性。

animation详解:

什么是css3中的动画:
使元素从一种样式逐渐变化为另一种样式
可以改变任意多的样式任意多的次数
可以用百分比规定变化发生的时间,或者用关键词“from”和“to”,等价于“0%”和“100%”,表示动画的开始和完成

通过css3我们可以创建动画,可以代替页面中的动画图片、Flash动画以及JavaScript。

如果创建css动画,需要了解@keyframes规则。
@keyframes规则用于创建动画,在其中规定某项css样式,就能创建由当前样式逐渐改为新样式的动画效果。

兼容性:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。

实现:
在 @keyframes 中创建动画时,要将其捆绑到某个选择器,否则不会产生动画效果。
需要至少规定以下两项:
规定动画的名称
规定动画的时长

示例:
<!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 */
}

/*定义动画----myfirst是动画的名称*/
@keyframes myfirst
{
from {background:red;}
to {background:yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background:red;}
to {background:yellow;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;}
to {background:yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background:red;}
to {background:yellow;}
}
</style>
</head>
<body>
    <div></div>
</body>
</html>

上一篇:jquery 中多个存在依赖关系的ajax调用解决办法


下一篇:数以亿计运行PHP的网站即将面临严重的安全风险