H5新特性 - CSS动画2D / 3D 、自定义动画 及 动画库

CSS动画2D / 3D 及动画库 自定义动画 及 动画库

一个元素只有一个transform属性；后面增加的transform属性会覆盖前面的属性
执行元素，添加过渡效果

transition:all,2s;

添加hover， hover中写动画效果

	div{
		width: 100px;
        height: 100px;
		background: red;
		margin-top: 20px;
		text-align: center;
		line-height: 100px;

        /*过渡*/
        transition: all 2s;
    }

	div:hover{
       transform: rotateZ(190deg) scale(2,2);
            
    }
    

CSS动画2D

• 旋转 单位是 度 deg

    <div style="transform: rotateZ(-30deg)">旋转</div>

• 位移 单位是 像素 px

    <div style="transform: translateX(150px)">位移</div>

• 缩放
  正常比例是 1
  大于1 为放大
  小于1 为缩小
  没有单位

    <div style="transform: scale(1.5,1.5)">缩放</div>

• 倾斜 单位是 度

    <div style="transform: skewX(45deg)">倾斜X</div>
    <div style="transform: skewY(45deg)">倾斜Y</div>
    <br><br>
    <div style="transform: skew(30deg,30deg)">倾斜</div>

• 文字反倾斜的方式
  没有实际意义上的反倾斜，只是倾斜相反的角度

    <div style="transform: skewX(45deg)">
        <p style="transform: skewX(-45deg)">倾斜</p>
    </div>

CSS动画3D

3D动画实际上，是在2D动画的基础上开启属性
transform-style: preserve-3d;（开启3D）
perspective: 400px;（景深）

• 自定义旋转中心
  transform-origin: left;

	.xc{
		position: absolute;
		left: 400px;
		top: 500px;
		margin-bottom: 20px;
		transform-style: preserve-3d;
		perspective: 400px;
	}
	.xc-bottom{
		position: absolute;
		text-align: center;
		line-height: 150px;
		color: #EF4153;
	}
	.xc-left{
		position: absolute;
		width: 75px;
		background-color: #EF4153;
		transform-origin: left;
		transition: all 1s;
	}
	.xc-right{
		position: absolute;
		width: 75px;
		left: 75px;
		background-color: #EF4153;
		transform-origin: right;
		transition: all 1s;		
	}
	.xc:hover>.xc-left{
		transform: rotateY(-180deg);
	}
	.xc:hover>.xc-right{
		transform: rotateY(180deg);				
	}
	
	<div class="xc">
		<div class="xc-bottom">你瞅啥</div>
		<div class="xc-left"></div>
		<div class="xc-right"></div>		
	</div>
	

自定义动画

自定义动画(也叫关键帧动画)： 其中，制作动画和绑定动画两个过程缺一不可

• 备注:
  1） 衣服可以制作很多件
  2） 同一件衣服也可以给多个人穿

制作动画 (做衣服)

@keyframes 声明自定义动画的关键词 后面需要写自定义动画的名称，空格间隔
from{ } 相当于 0%
to{ } 相当于 100%

    @keyframes myAnimation{
    	0%{}
    	25%{
			transform: translateX(400px);
    	}
    	50%{
        	transform: translate(400px,400px);
    	}
   	 	75%{
        	transform: translate(0px,400px);
    	}
    	100%{
        	transform: translate(-200px,600px);
     	}
    }
    

绑定动画 (穿衣服)

绑定动画 (穿衣服)

• animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name ：动画名称 必填
  • animation-duration： 动画执行所需的时间 必填
  • animation-timing-function： 动画执行的速度曲线 可选 默认值 ease
  • animation-delay：动画开始之前的延迟 可选 默认值 0s
  • animation-iteration-count ： 动画执行的次数 可选 默认值1 没有单位 infinite:无限次
  • animation-direction： 规定是否轮流反向播放 (注意：播放次数至少为2) 可选 默认不反向,alternate：反向播放

• 注意：请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了

	.ball{
	    animation: myAnimation 3s ease-in-out 4s infinite alternate;
	}

示例：

	<style type="text/css">
		*{
			margin: 0px;
			padding: 0px;
		}
		.all{
			width: 500px;
			height: 400px;
			border: 1px solid ;
			position: relative;
			top: 100px;
			left: 400px;
		}
		.ball1{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #F59646;
			position: absolute;
			animation: move 6s ease 1s infinite alternate;
		}
		.ball2{
			width: 100px;
			height: 100px;
			border-radius: 50%;
			background-color: #FF1919;
			position: absolute;
			animation: move 6s ease 4s infinite alternate;
		}
		@keyframes move{
			0%{}
			25%{
				transform: translateX(400px);
			}
			50%{
				transform: translate(400px,300px);
			}
			75%{
				transform: translate(0px,300px);
			}
		}	
	</style>
	
	<div class="all">
		<div class="ball1"></div>
		<div class="ball2"></div>
	</div>
	

动画库

• 引入动画库
  实际的代码根据自己的文件 animate.min.css 位置确定

	<link rel="stylesheet" type="text/css" href="动画库/animate.min.css"/>

需要自定义动画库的动画使用时：

	// 自定义的参数 样式
	.cover1{
	
	}
	// 修改的是动画的总时间 延迟时间
	.animated{
		animation: filp 1s linear 7s 1;
	}
	
	// 需要替换的动画效果名称
	.flip{
	}
	<div class="cover1 flip animated"> </div>