CSS3 动画总结

最新推荐文章于 2022-04-07 14:05:56 发布

୧(不負眾望)૭

最新推荐文章于 2022-04-07 14:05:56 发布

阅读量203

点赞数

文章标签： css3 animation

本文链接：https://blog.csdn.net/Huang_DW/article/details/108312629

版权

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScript

CSS3动画的属性主要分为三类：
transform 转换动画、直接动画
transition 过渡动画
animation 帧动画

transform（转换动画、直接动画）

1.rotate（旋转）
包含三种状态，x、y、z三轴的变化
rotatex、rotatey、rotatez（默认）

旋转（rotate）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: rotate(45deg);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

2.translate（平移）
包含三种状态，x、y、z三轴的变化
translatex（默认）、translatey、translatez

平移（translate）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            transform: translate(100px);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

3.skew（变形）
包含两种状态，x和y的变化
skewx（默认）、skewy

变形（skew）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: skew(30deg);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

4.scale（伸缩比例）
scale两个参数时，分别是宽度和高度的比例
scale一个参数时，是等比例缩放

伸缩比例（scale）实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            margin:15% auto;
            transform: scale(2);
        }
        /*动画写在主样式里，页面加载完成之后就执行*/
    </style>
</head>
<body>
<div class="block"></div>
</body>
</html>

transform相关补充：
transform-orgin：2d，3d转换中心的设置
transform-style:preserve-3d 2d转化为3d动画

transition（过渡动画）

transition-property 过渡的属性

transition-delay 延迟时间

transition-duration 动画过渡时间

transition-timing-function 过渡效果的时间曲线：
linear（匀速）
ease（慢-快-慢）
ease-in（开始慢）
ease-out（结束慢）
ease-in-out（开始、结束慢）

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition</title>
    <style>
        .block{
            width:100px;
            height:100px;
            background-color: aqua;
            transition: all 3s linear;
        }
        /*transition:过渡的属性 过渡时间 延迟时间 效果曲线*/
        .block:hover{
            height:300px;
        }
    </style>
</head>
<body>
    <div class="block"></div>
</body>
</html>

animation（帧动画）

当在@keyframe创建动画，把它绑定到一个选择器

animation-name 规定 @keyframes 动画的名称

animation-duration 执行动画所需时间，默认是0

animation-timing-function 规定动画的速度曲线，默认是ease

animation-delay 延迟时间，默认时0

animation-iteration-count 规定动画被播放的次数，默认是 1

animation-direction 规定动画是否在下一周期逆向地播放，默认是 normal
normal（正常）
reverse（动画反向播放）
alternate（奇数时正向播放，偶数时反向播放）
alternate-reverse（奇数时反向播放，偶数式正向播放）

୧(不負眾望)૭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 动画总结

CSS3添加了几个动画效果的属性，通过设置这些属性，可以做出一些简单的动画效果而不需要再去借助JavaScriptCSS3动画的属性主要分为三类：transform 转换动画、直接动画transition 过渡动画animation 帧动画transform（转换动画、直接动画）1.rotate（旋转）包含三种状态，x、y、z三轴的变化rotatex、rotatey、rotatez（默认）旋转（rotate）实例<!DOCTYPE html><html lang="
复制链接

扫一扫