CSS3动画animation使用和属性及相关案例

5.2 动画

过渡:鼠标经过和离开才可以触发。
动画:可以自己自动触发。

5.2.1 动画的基本使用

  1. 先定义动画。
  2. 在使用(调动)动画。
  • 用@keyframes 定义动画
@keyframes move(动画名称) {
	0% {
	/*起始状态*/
		transform: translate(0,0);
		}
	100% {
	/*中止状态*/
		transform: translate(500px,500px) scale(1.3) rotate(180deg);
	}
}
  • 调用动画
div {
	/*必需 调用动画名称*/
	animation-name: move;
	/*必需 持续时间*/
	animation-duration: 2s;
}
  • “from“ 和 ”to” 相当于“0%“ 和”100%”
    (不建议)
@keyframes move(动画名称) {
	from {
	/*起始状态*/
		transform: translate(0,0);
		}
	to {
	/*中止状态*/
		transform: translate(500px,500px) scale(1.3) rotate(180deg);
	}
}
  • 动画序列
  1. 可以做多个状态的变化(分布变化)
  2. 里面的百分比要是整数
  3. 从一个状态走到另一个状态的时间是花费的时间除以所有的状态

5.2.2 动画常用属性

动画属性 描述
@keyframes 规定动画的名字和状态
animation 所有动画属性的简写属性,除了animation-play-state属性。
animation-name 必需。规定动画的名字 。
animation-duration 必需。规定动画所花费的秒或毫秒,默认0。
animation-timing-function 规定动画的速度曲线 。默认是 ease,匀速为 linear。
animation-delay 规定动画何时开始,默认是0
animation-interation-count 规定动画的重复次数,默认是1,infinite 表示无限。
animation-direction 规定动画是否在下一周期逆向播放,默认为normal,反方向为 alternate。
animation-play-state 当鼠标经过图片,就停止。默认是 running,还有 paused。
animation-fill-mode 规定动画结束后的状态,默认是backwords,即回到起始状态;想要回到结束位置就使用 forwords。
steps steps(n),分步来完成动画

5.2.3 动画简写属性

animation: name duration timing-function delay iteration-count direction fill-mode;

注意

  • 简写的时候不能使用 animation-play-state 属性
  • 想要动画走回来,而不是跳回开始位置,使用animation-direction
  • 想要迭代,无限循环,使用interation-count: infinite;

案例一(热点图)


思路:

  1. 显示小圆点,用background-color
  2. 定位小圆点,在创建相同三个大小的圆点,利用box-shadow显示,利用属性选择器定位这三个小圆点,进行层叠。
  3. 在三个小圆点进行动画,先定义,在调用。
  4. 定义动画,使其有持续的时间,循环调用,匀速运动
  5. 调用动画,将三个阴影的小圆点进行慢慢放大,直到消失。

代码展示

<style>
.hot {
            position: relative;
            width: 800px;
            height: 800px;
            margin: 0 auto;
            background: url(media/map.png) no-repeat;
            background-color: black;
        }
        
        .capital {
            position: absolute;
            top: 229px;
            right: 245px;
        }
        
        .dotted {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background-color: #09f;
        }
        
        div[class^="wave"] {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 5px;
            height: 5px;
            border-radius: 50%;
            box-shadow: 0 0 8px 2px #09f;
            animation: city 1.3s linear infinite;
        }
        
        @keyframes city {
            70% {
                width: 30px;
                height: 30px;
                opacity: 1;
            }
            100% {
                width: 60px;
                height: 60px;
                opacity: 0;
            }
        }
        
        .capital .wave2 {
            animation-delay: .3s;
        }
        
        .capital .wave3 {
            animation-delay: .6s;
        }
style>
<body>
<div class="hot">
        <div class="capital">
            <div class="dotted">div>
            <div class="wave1">div>
            <div class="wave2">div>
            <div class="wave3">div>
        div>
    div>
body>

案例二(北极熊跑步)

CSS3动画animation使用和属性及相关案例_第1张图片

思路

  1. 拿到北极熊图片 宽1600,高100,如若北极熊显示在画面,则先将一个北极熊的状态显示出来。
  2. 做出北极熊跑得动画,定义动画,在调用动画。
  3. 定义动画,持续的时间,然后有几个北极熊就利用steps步数显示他的状态,使用infinite到终止位置一直走。
  4. 调用动画,利用定位将熊奔跑的各个状态显示出来。
  5. 定义第二个动画,让熊从刚开始的位置跑到页面的中间,利用forwards让熊到终止位置
  6. 调用,利用定位让熊从初始位置到终止为止。

代码展示

<style>
* {
            margin: 0;
            padding: 0;
        }
        
        body {
            background-color: rgb(41, 104, 240);
        }
        
        .bear {
            position: absolute;
            width: 200px;
            height: 100px;
            margin-top: 242px;
            background: url(media/bear.png) no-repeat;
            animation: bear .5s steps(8) infinite, move 3s linear forwards;
            z-index: 999;
        }
        
        @keyframes bear {
            100% {
                background-position: -1600px 0;
            }
        }
        
        @keyframes move {
            0% {
                left: 0;
            }
            100% {
                left: 50%;
                transform: translate(-50%);
            }
        }
        
        .bgc1 {
            margin-top: 284px;
            transform: translate(-50%);
            height: 336px;
            width: 3840px;
            background: url(media/bg1.png) repeat-x;
            animation: bgc1 3s linear infinite;
        }
        
        @keyframes bgc1 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -3840px 0;
            }
        }
        
        .bgc2 {
            position: absolute;
            top: 0px;
            margin-top: 284px;
            transform: translate(-50%);
            height: 336px;
            width: 3840px;
            background: url(media/bg2.png) repeat-x;
            animation: bgc2 3s linear infinite;
        }
        
        @keyframes bgc2 {
            0% {
                background-position: 0 0;
            }
            100% {
                background-position: -3840px 0;
            }
        }
style>
<body>
    <div class="bear">div>
    <div class="bgc2">div>
    <div class="bgc1">div>
body>

希望能帮助到大家。如有写的不好的请大佬们指点一二。一起进步。

你可能感兴趣的:(css3,笔记,实例,css3)