CSS3过渡和动画

CSS3过渡和动画

1、CSS3 2D变化：

translate（）方法：

根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

例如：-webkit-transform: translate(50px,100px); ———<chrome>是从左边元素移

动50个像素，从顶部移动100个像素

rolate（）方法：

在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

例如：-webkit-transform: rotate(30deg); 是元素顺时针旋转30度

scale（）方法：

元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

例如：transform: scale(2,3);表示宽度变大为2倍，高度变大为3倍

skew（）方法：

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

例如：-webkit-transform: skew(30deg,20deg)表示元素在X轴和Y轴上倾斜20度和30度

2、CSS3 2D变化：

rotateX（）和rotateY（）方法：

围绕其在一个给定度数X轴和Y轴旋转的元素

例如：-webkit-transform: rotateX(130deg)表示绕着X轴旋转30度

3、CSS3 过渡

指定要添加效果的CSS属性
指定效果的持续时间

添加宽度变化的过渡：

• 指定添加的CSS属性：当用户鼠标悬停时，改变div属性的宽度：

div:hover
{
    width:300px;
}

• 指定效果的持续时间(宽度变化)：

div
{
    transition: width 2s;
}

添加转换效果的过渡：

• 指定css属性：改变div的变化效果

transform:rotate(80deg);

• 指定效果的持续时间（转换效果）,设置为2s：

transition:transform 2s

过渡属性：

transition: property duration timing-function delay;

四个参数分别为：css属性的name，过渡过程所需时间，过渡时间曲线，过渡开始的
延长时间，且这些属性可单独使用：

例如：transition-delay: 2s;设置过渡开始的延长时间为2s，当设置hover属性时，仅当悬停在此2s后才开始过渡

4、CSS3 动画：

@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式

创建@keyframes规则（绑定一个选择器）：

• 规定动画的名称

• 规定动画的时长

例如：把 "myfirst" 动画捆绑到 div 元素，时长：5 秒

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

定义动画的过程：

• from{ }to{ }方法：

例如设定背景从红色到黄色的动画：

@keyframes myfirst{
    from {background:red;}
    to {background:yellow;}
}

• 百分比来规定变化发生时间方法：

例如设定当动画为25%及50%时改变背景色，然后当动画100%完成时再次改变

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

或者同时改变改变背景色和位置：

@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

CSS3的动画属性：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

参数分别为：绑定的选择器名称、动画持续的秒数、动画的时间曲线、动画的启动前的延长时长、动画的播放次数、指定是否轮流反向播放动画、规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时）要应用到元素的样式、指定动画是否正在运行或已暂停

每个属性都可单独使用：

例如设定一个但鼠标悬停在div上时暂停动画：

div:hover{
    animation-play-state:paused
}