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

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

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

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

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <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’


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <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>

css3新添加的过渡、动画和变换_第1张图片

@-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轴上的位置

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demotitle>
    <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>

css3新添加的过渡、动画和变换_第2张图片

总结:

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

你可能感兴趣的:(css)