css3 animation

最新推荐文章于 2024-04-16 22:03:31 发布
最新推荐文章于 2024-04-16 22:03:31 发布
阅读量165 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aCc1DeNt/article/details/98171820
版权

简单使用

 @keyframes run {
      0% {
        left: 0;
        top: 0;
      }

      25% {
        left: 100px;
        top: 0;
      }

      50% {
        left: 100px;
        top: 100px;
      }

      75% {
        left: 0;
        top: 100px;
      }

      100% {
        left: 0;
        top: 0;
      }
    }

    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      animation:run 4s;
    }

参数解释

animation-name 定义的关键帧名
animation-duration 动画的总时间 动画执行完会返回到原有状态
animation-timing-function 定义的是动画每一段的运动状态
animation-delay 延迟
animation-iteration-count 执行几次，第二次开始没有延迟
animation-direction ： reverse 会倒着执行 alternate 先正着执行一次然后倒着执行（需要执行次数大于2）
animation-play-state running、paused 控制暂停 （少用，可能会有错误行为）
animation-fill-mode forwards 运动完后会保存最后一帧的状态 backwards 动画开始前就是第一帧的状态（delay） both 两者的结合（使用的比较多）

keyframes

0%可以写为from
100%可以写为to
其他的没有可替换的写法
兼容性问题：过渡版本的浏览器要加前缀名

demo演示

  <style>
    body {
      background-color: #000;
    }

    @keyframes space-change {
      from {
        opacity: .3;
      }

      25% {
        opacity: 1;
      }

      50% {
        opcity: .3;
      }

      75% {
        opacity: .1;
      }

      to {
        opacity: .3;
      }
    }

    @keyframes sunrise {
      from {
        opacity: 0;
      }

      10% {
        opacity: 1;
        transform: scale(.7, .7) translateX(0) translateY(0)
      }

      30% {
        opacity: 1;
        transform: scale(.5, .5) translateX(0) translateY(-500px)
      }

      50% {
        opacity: 0;
        transform: scale(.7, .7) translateX(400px) translateY(0)
      }

      to {
        opacity: 0;
      }
    }

    @keyframes moonrise {
      from {
        opacity: 0;
        transform: translateY(0);
      }

      30% {
        opacity: 0;
        transform: translateY(0);
      }

      50% {
        opacity: 0;
      }

      70% {
        transform: translateY(-300px);
        opacity: 1;
      }

      80% {
        transform: translateY(-300px);
        opacity: 1;
      }
      90%{
        opacity: 0;
      }
      100% {
        transform: translateY(0);
        opacity: 0;
      }
    }

    .space {
      height: 500px;
      background-image: linear-gradient(to bottom, rgba(0, 130, 255, 1), rgba(255, 255, 255, 1));
      animation: space-change 10s cubic-bezier(.5, 0, .5, 1) infinite;
    }

    .sun {
      position: absolute;
      left: calc(50% - 25px);
      top: calc(50% - 25px);
      width: 50px;
      height: 50px;
      background-color: #fff;
      border-radius: 50%;
      transform: scale(.5, .5);
      box-shadow: 0px 0px 50px 50px #fff,
        0px 0px 100px 125px #ff0;
      animation: sunrise 10s infinite;
    }

    .moon {
      position: absolute;
      left: calc(50% + 400px);
      top: calc(50% - 50px);
      width: 100px;
      height: 100px;
      background-color: #fff;
      border-radius: 50%;
      box-shadow: 0px 0px 8px #fff, inset 0px 0px 8px #000;
      animation: moonrise 10s cubic-bezier(0, 0, .5, .5) infinite;
    }

    .moon::after {
      position: absolute;
      content: "";
      width: 90px;
      height: 90px;
      background-color: #000;
      border-radius: 50%;
      left: -10px;
      top: -10px;
    }
  </style>
</head>

<body>
  <div class="space"></div>
  <div class="sun"></div>
  <div class="moon"></div>
</body>

step animation

animation-timing-function的属性
steps(int,start\end)
每一段动画以多少步实现 第二个指定每一步的值发生变化的时间点
end （比较常用）
保留当前帧状态，直到这段动画时间结束
用forwards可看到最后一帧
start
保留下一帧状态，直到这段动画时间结束

不常用原因：忽略第一帧的效果 不好弥补
backwards需要有延迟时间
特殊值
steps(1,end)===step-end
steps(1,start)===step-start

step完成的三大例子

打字效果

 <style>
     @keyframes cursor{
    0%{
        border-left-color: rgba(0,0,0,0);
    }
    50%{
        border-left-color: rgba(0,0,0,1);
    }
    100%{
        border-left-color: rgba(0,0,0,0);
    }
}

@keyframes cover{
    0%{
        left:0;
    }
    100%{
        left:100%;
    }
}

div{
    position: relative;
    display: inline-block;
    height:100px;
    font-size:80px;
    line-height: 100px;
    font-family: monospace;
}


div::after{
    content:"";
    position: absolute;
    left:0;
    top:10px;
    height:90px;
    width:100%;
    background-color: #fff;
    border-left:2px solid black;
    box-sizing:border-box;
    animation:cursor 1s steps(1, end) infinite, cover 12s steps(12, end);
}
    </style>
</head>

<body>
    <div>laoyutongsad</div>
</body>

钟表效果

   <style>
        @keyframes secondrun {
            0% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(540deg);
            }
        }

        @keyframes minuterun {
            0% {
                transform: rotate(180deg);
            }

            100% {
                transform: rotate(540deg);
            }
        }

        div.clock {
            position: relative;
            width: 512px;
            height: 512px;
            background-image: url(./img/clock.png);
            background-size: cover;
            background-repeat: no-repeat;
        }

        div.second {
            position: absolute;
            left: 247px;
            top: 180px;
            width: 16px;
            height: 278px;
            background-image: url(./img/second.png);
            background-size: cover;
            background-repeat: no-repeat;
            transform-origin: center 76px;
            transform: rotate(180deg);
            z-index: 3;
            animation: secondrun 60s steps(60, end) infinite;
        }

        div.minute {
            position: absolute;
            transform-origin: center 16px;
            left: 238px;
            top: 240px;
            width: 32px;
            height: 218px;
            background-image: url(./img/minute.png);
            background-size: cover;
            background-repeat: no-repeat;
            transform: rotate(180deg);
            z-index: 2;
            animation: minuterun 3600s steps(60, end);
        }

        div.hour {
            position: absolute;
            transform-origin: center 16px;
            left: 238px;
            top: 240px;
            width: 32px;
            height: 148px;
            background-image: url(./img/hour.png);
            background-size: cover;
            background-repeat: no-repeat;
            z-index: 1;
        }
    </style>
</head>

<body>
  
    <div class='clock'>
        <div class="second"></div>
        <div class="minute"></div>
        <div class="hour"></div>
    </div>

</body>

跑马效果`

    <style>
        .box{
            width:200px;
            height:100px;
            overflow: hidden;
        }
        .pic{
            width:2400px;
            height:100px;
            background-image: url('./img/horse.png');
            animation:run 1s steps(12,end) infinite;
        }
        @keyframes run{
           from{
               transform: translate(0)
           }
           to{
               transform:translate(-2400px)
           }
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="pic"></div>
    </div>
</body>
aCc1DeNt
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 animation 详解
ZiXiaweb的博客
10-19 1354
animation介绍 animation的中文含义是过渡。过渡是CSS3中具有颠覆性的一个特征，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。 transition 包括以下属性： transition-property: all; 如果希望所有的属性都发生过渡，就使用all。 transition-duration: 1s; 过渡的持续时间。 transition-timing-function: linear; 运动曲线。属性值可以是： linear 线性 ease 减速
css3 animation酷炫的文字动画特效
11-04
在本文中，我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，...
CSS3 Animation
Fayeni的博客
08-09 2423
CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation；我们一起学习完了Transform和Transition，让我们对元素实现了一些基本的动画效果，这些我想足以让大家激动了一阵子，今天我们趁着这个热劲继续第三个动画属性Animation的学习，单从Animation字面上的意思，我们就知道是“动画”的意思。但CSS3中的Animation与HTML...
CSS3 animation 动画用法介绍
保持清醒
12-30 7819
一、css3 动画是什么 css3动画是使用css3的动画属性，去控制页面元素，让元素从一种样式逐渐变化为另一种样式的效果。 二、css3的动画属性 三、animation 介绍 animation主要包含六个属性，具体含义如下： （一）、keyframe 在介绍animation具体使用之前，要先介绍keyframe。 @keyframes让开发者通过指定动画中特定时间点必须展现的关键帧样式（或者说停留点）来控制CSS动画的中间环节。这让开发者能够控制动画中的更多细节而不是全部让浏览器自动处理。 要使
CSS3（三）Animation 入门详解
热门推荐
CSDN前端知识共享
04-17 7万+
Animation 前言 好的前端工程师，会更注重用户的体验和交互。那么动画就是将我们的静态页面，变成具有灵动性，为我们的界面添加个性的一种方式。 下面是七喜的官方主页，它就是很好的富交互样例。鼠标移动到导航栏，就会播放多种动效，给用户一种酷炫的体验。我觉得用户体验，才是前端工程师更加关注的问题，而不是一味追求Javascript的编码技能。 七喜官方网站 A...
CSS3 animation介绍
houzhyan-博客
05-24 2139
上一篇transition过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡，呈现出动画效果，但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样，能控制帧的每一步，制作出更强大的动画效果。和其他CSS3属性类似，animation包含很多子属性，我们一起看看：animation-nameanimation-durationanimation-timing-functionanim...
CSS3 animation（动画）属性详解
qq_40891322的博客
11-19 1288
CSS3 animation（动画）属性详解 1.语法 简写为：animation: name duration timing-function delay iteration-count direction fill-mode; @keyframes 规定 @keyframes 动画的名称。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规
css3 animation (动画) 属性
博客
07-02 819
值 说明 animation-name 动画名称 animation-duration 动画总时长 animation-timing-function 设置动画速度 animation-delay 设置动画延时 animation-iteration-count 设置动画播放次数 animation-direction 是否轮流反向播放动画 animation-fill-mode 当动画不播放时（动画完成或动画有延时为播放时），要应用这个样式 animation-play
CSS3 animation 实现跑马灯效果
weixin_49054076的博客
04-02 591
利用animation属性实现跑马灯效果
CSS3 animation-direction 属性
2303_79895461的博客
04-16 532
animation-direction 属性定义是否循环交替反向播放动画。**注意：**如果动画被设置为只播放一次，该属性将不起作用。可动画化（animatable）object。
CSS3 Animation文字动画特效
06-24
在本文中，我们将深入探讨CSS3 Animation在创建文字动画特效中的应用。CSS3，作为CSS（层叠样式表）的最新版本，引入了许多强大的新特性，其中包括动画功能，使得网页设计更加生动活泼，增强了用户体验。 一、CSS3 ...
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性是现代网页设计中不可或缺的一部分，它允许开发者创建复杂的动态效果，而无需依赖JavaScript或Flash。在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的...
CSS3 animation动画
04-15
**CSS3 Animation动画详解** CSS3是Web设计领域的一个重大突破，它引入了许多新的特性，其中最引人注目的就是动画（Animation）功能。通过CSS3的动画，开发者可以为网页元素添加平滑、动态的效果，提升用户体验。在...
CSS3 Animation文字动画特效特效代码
03-20
**CSS3 Animation简介** CSS3 Animation是CSS3中的一项强大特性，它允许开发者创建复杂的动态效果，如平移、旋转、缩放、淡入淡出等，而无需借助JavaScript或者其他外部库。通过定义关键帧（keyframes）和应用动画...
信息技术教师技能大赛基础知识与专业技能试卷.doc
08-16
信息技术教师技能大赛基础知识与专业技能试卷.doc
基于ssm的新生报到系统(有报告) Javaee项目，ssm项目
最新发布
08-16
资源详情：https://blog.csdn.net/2302_78191516/article/details/141269772
奥柯玛DC16A电磁炉原理图.rar
08-16
奥柯玛DC16A电磁炉原理图
麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包
08-16
麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包 麒麟 V10 SP1 升级 python 3.7.9 所需 rpm 包
java-学生比赛指导管理系统（源码+数据库+论文）.rar
08-16
针对当前高校各类竞赛的报名现状，本文利用JSP技术以及Mysql数据库开发设计一款针对高校比赛指导及报名的线上平台，学生用户可以通过线上平台及时了解到高校内的各类赛事信息及规则，通过页面信息的了解可以实现在线的报名，对于报名审核通过的学生用户可以获得对应的比赛指导资料，利用线上平台帮助更好的提升比赛信息的传播范围以及比赛报名的效率，通过流程化和线上化的平台帮助建立在线的比赛报名及信息传递的平台。 关键词：JSP技术；Mysql数据库；比赛管理；在线报名；
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值