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>