CSS3——动画

最新推荐文章于 2024-05-31 13:02:11 发布

蜡笔小新007

最新推荐文章于 2024-05-31 13:02:11 发布

阅读量86

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/nervelin/article/details/106691822

版权

CSS3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

基本语法

如果要在css3中使用动画，需要先用@keyframes定义动画，再用选择器使用动画
相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

用keyframes 定义动画

@keyframes 动画名称 {
   0%{
        width:100px;
   }  
   100%{
        width:200px;
   }
}

动画序列

1、0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。
2、在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。
3、动画是使元素从一种样式逐渐变化为另一种样式的效果。您可以改变任意多的样式任意多的次数。
4、请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。
案例源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes move {
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(1000px,0);
            }
            50% {
                transform: translate(1000px,500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0,0);
            }
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: turquoise;
            animation-name: move;
            animation-duration: 6s;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

效果（视频转换成gif有水印，请谅解）：

常用属性

在这里插入图片描述

动画简写属性

animation：动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态;
顺序除了前面动画名称，持续时间需要写在前面，后面的顺序无关紧要，没有要求
注意点：
1、简写属性里面不包含 animation-play-state
2、暂停动画：animation-play-state: puased; 经常和鼠标经过等其他配合使用
3、想要动画走回来，而不是直接跳回来：animation-direction ： alternate
4、盒子动画结束后，停在结束位置： animation-fill-mode ： forwards

蜡笔小新007

关注

0
点赞
踩
0

收藏

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

基本语法如果要在css3中使用动画，需要先用@keyframes定义动画，再用选择器使用动画相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。用keyframes 定义动画@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; }}动画序列1、0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。2、在 @keyframes 中规定某项 CSS 样
复制链接

扫一扫