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

最新推荐文章于 2024-04-25 16:16:15 发布

1091214370的博客

最新推荐文章于 2024-04-25 16:16:15 发布

阅读量3.1k

点赞数

分类专栏： css 文章标签： css3 css 动画

本文链接：https://blog.csdn.net/qq_34149935/article/details/53915718

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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>

总结：

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

1091214370的博客

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css3新添加的过渡、动画和变换

css3新添加的过渡、动画和变换在这几周的时间，我看完了css部分的相关知识，在这个过程中唯一的感觉就是css并没有我想象的那么简单，它有着很复杂的一面。这几周的时间，我看完一本css权威指南和html5权威指南的css部分，也算是系统的学习了一下css。个人觉得有必要写一下CSS3部分的新特性：过渡、动画和变换。过渡过渡效果一般是由浏览器直接改变元素的css属性实现的。例如：hover
复制链接

扫一扫