css3新添加的过渡、动画和变换

来源：互联网发布：java 网络通讯框架编辑：程序博客网时间：2024/05/17 03:46

css3新添加的过渡、动画和变换

在这几周的时间，我看完了css部分的相关知识，在这个过程中唯一的感觉就是css并没有我想象的那么简单，它有着很复杂的一面。这几周的时间，我看完一本css权威指南和html5权威指南的css部分，也算是系统的学习了一下css。
个人觉得有必要写一下CSS3部分的新特性：过渡、动画和变换。

过渡
过渡效果一般是由浏览器直接改变元素的css属性实现的。例如：hover选择器。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <style>    .trs{font-size:large;border:1px solid black;}    .trs:hover{font-size:x-large;color:red;}    </style></head><body>    <p class="trs">        这是过渡！    </p></body></html>

过渡属性：

属性说明值 transition-delay 指定过渡开始之前的延时时间时间 transition-duration 指定过渡的持续时间时间 transition-property 指定应用的过渡属性字符串 transition-timing-function 指定过渡期间计算中间值的方式五种预设曲线 ease（默认）、linear、ease-in、ease-out、ease-in-out transition 在一条声明中指定所有过渡细节的简写属性简写属性如下:transition：’transition-property’ ‘transition-duration’ ‘transition-timing-function’ ‘transition-delay’

注意：使用过渡时要考虑浏览器的兼容问题：
safari和Chrome：-webkit
Firefox：-moz
Opera：-o

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <style>    .trs{font-size:large;border:1px solid black;}    .trs:hover{font-size:x-large;color:red;        transition:color,font-size 500ms 100ms;        -webkit-transition:color,font-size 500ms 100ms;        -moz-transition:color,font-size 500ms 100ms;        -o-transition:color,font-size 500ms 100ms;    }    </style></head><body>    <p class="trs">        这是过渡！    </p></body></html>

使用动画
css动画的本质上是增强的过渡。属性如下：

属性说明值 animotion-delay 设置动画开始前的延时时间 animotion-direction 设置动画循环播放的时候是否反向播放 normal、alternate animotion-duration 设置动画持续播放的时间时间 animotion-iteration-count 设置动画循环播放的次数 infinite、数字 animotion-name 指定动画名称 none、字符串 animotion-play-state 允许动画暂停和重新播放 running、paused transition-timing-function 指定过渡期间计算中间值的方式 ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier animotion 简写属性

animotion属性简写如下：
animation：‘ animotion-name’‘animotion-duration’‘transition-timing-function ’‘animotion-delay’‘animotion-iteration-count’

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <style>    .trs{font-size:large;border:1px solid black;}    .trs:hover{        -webkit-animation:'donghua' 500ms linear 100ms infinite ;    }    @-webkit-keyframes donghua{        to{            font-size:x-large;            color:red;        }    }    </style></head><body>    <p class="trs">        这是动画！    </p></body></html>

@-webkit-keyframes donghua{        to{            font-size:x-large; //属性和属性值            color:red;//属性和属性值        }    }

上面这部分代码相当于动画的关键帧，关键帧可以设置初始状态（from{‘属性和属性值’}或者0%{‘属性和属性值’}）、中间关键帧（50%{ ‘属性和属性值’}）和结束关键帧（to{属性和属性值’}或者100%{‘属性和属性值’}），中间关键帧可以是0%–100%中间的任意多个值。若使用多个动画：
-webkit-animation:'动画名1'，'动画名2','...' 500ms linear 100ms infinite ;

变换
使用css可是实现线性变换，即旋转、缩放、倾斜和平移。
transform：指定应用的变换功能
transform-orign:指定变换的起点
transform属性值：

值说明 translateX（‘长度值或百分数值’）、translateY（‘长度值或百分数值’）、translate（‘长度值或百分数值’）在水平方向、竖直方向或者两个方向平移元素 scaleX（‘数值’）、scaleY（‘数值’）、scale（‘数值’）在水平方向、竖直方向或者两个方向缩放元素 rotate（‘角度’）旋转元素 skewX（‘角度’）、skewY（‘角度’）、skew（‘角度’）在水平方向、竖直方向或者两个方向倾斜元素 matrix（4~6个数值，逗号隔开）指定自定义变换

transform-orign属性值：

值说明 % 指定元素x轴或y轴的起点长度值指定距离 left、right、center 指定x轴上的位置 top、center、bottom 指定y轴上的位置

将变换作为动画和过渡处理

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>demo</title>    <style>    .trs{width:100px;font-size:large;border:1px solid black;}    .trs:hover{        -webkit-transition-duration:1.5s;        -webkit-transform:rotate(360deg);    }    </style></head><body>    <p class="trs">        这是转换！    </p></body></html>

总结：

使用这些特性可以对元素外观进行各种各样的设置，能够恰当的提升体验和增加灵活性。

0 0