CSS3动画

最新推荐文章于 2022-06-07 13:29:56 发布

王祎0825

最新推荐文章于 2022-06-07 13:29:56 发布

阅读量60

点赞数

分类专栏：阶段二：移动web网页开发文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_44757223/article/details/123851641

版权

阶段二：移动web网页开发专栏收录该内容

15 篇文章 3 订阅

订阅专栏

文章目录

前言
一、动画的基本使用
二、动画常用属性
三、动画简写属性
四、案例：热点图案例
- 1.代码示例
- 2.效果图
五、速度曲线细节

前言

动画（animation）是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。

相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。

一、动画的基本使用

制作动画分为两步：

先定义动画
再使用（调用）动画。

1.用keyfames定义动画（类似定义类选择器)

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

动画序列

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

注意：

可以做多个状态的变化keyframe 关键帧
里面的百分比要是整数
里面的百分比就是总的时间的划分

2.元素使用动画

div {
           width: 200px;
           height: 200px;
           background-color: aqua;
           margin: 100px auto;
           /* 调用动画 */
           animation-name: 动画名称;
           /* 持续时间 */
           animation-duration: 持续时间;
       }

二、动画常用属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0（必须的）
animation-timing-function	规定动画的速度曲线，默认是"ease"
animation-delay	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”，“altermate”逆播放
animation-play-state	规定动画是都正在运行或暂停。默认是running，还有paused
animation-fill-mode	规定动画结束后状态，保持forwards 回到起始backwards

三、动画简写属性

animation:动画名称持续时间运动曲线何时开始播放次数是否反方向动画起始或者结束的状态

animation： myfirst  5s linear 2s infinite alternate;

简写属性里面不包含animation-play-state；
暂停动画：animation-play-state：puased；经常和鼠标经过等其他配合使用
想要动画走回来，而不是直接跳回来：animation-direction：alternate；
盒子动画结束后，停在结束位置：animation-fill-mode：forwards

四、案例：热点图案例

1.代码示例

   <style>
       body {
           background-color: #333;
       }
       
       .map {
           position: relative;
           width: 747px;
           height: 616px;
           background: url(../media/map.png) no-repeat;
           margin: 0 auto;
       }
       
       .city {
           position: absolute;
           top: 227px;
           right: 193px;
           color: #fff;
           /* border-radius: 50%; */
       }
       
       .tb {
           top: 500px;
           right: 80px;
       }
       
       .gz {
           top: 535px;
           right: 170px;
       }
       
       .dotted {
           width: 8px;
           height: 8px;
           background-color: #09f;
           border-radius: 50%;
       }
       
       .city div[class^="pulse"] {
           /* 保证小波纹在父盒子里面水平垂直居中 放大之后就会从中心向四周发散 */
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 8px;
           height: 8px;
           box-shadow: 0 0 12px #009dfd;
           border-radius: 50%;
           animation: pulse 1.2s linear infinite;
       }
       
       .city div.pulse2 {
           animation-delay: 0.4s;
       }
       
       .city div.pulse3 {
           animation-delay: 0.8s;
       }
       
       @keyframes pulse {
           0% {}
           70% {
               /* transform: scale（5）；不要用scale会因为它会让阴影变大 */
               width: 40px;
               height: 40px;
               opacity: 1;
           }
           100% {
               width: 70px;
               height: 70px;
               opacity: 0;
           }
       }
   </style>
</head>

<body>
   <div class="map">
       <div class="city">
           <div class="dotted"></div>
           <div class="pulse1"></div>
           <div class="pulse2"></div>
           <div class="pulse3"></div>
       </div>
       <div class="city tb">
           <div class="dotted"></div>
           <div class="pulse1"></div>
           <div class="pulse2"></div>
           <div class="pulse3"></div>
       </div>
       <div class="city gz">
           <div class="dotted"></div>
           <div class="pulse1"></div>
           <div class="pulse2"></div>
           <div class="pulse3"></div>
       </div>
   </div>
</body>

2.效果图

在这里插入图片描述

五、速度曲线细节

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

值	描述
linear	动画从头到尾的速度是相同的，匀速
ease	默认。动画以低速开始，然后加快，在结束前变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束
steps()	指定了时间函数中的间隔数量（步长）