<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3动画</title>
</head>
<style>
.transiton_demo {
width: 100px;
height: 100px;
border-radius: 50%;
background: #f40;
/* 过度效果需要指定多少秒或者毫秒才能完成 */
transition-duration: 1s;
/* 指定css属性的name增加transition效果 默认值是all所有属性都增加过渡效果 */
/* transition-property: height; */
/* 指定过度效果的转速曲线
linear（默认属性）匀速 = cubic-bezier(0,0,1,1)
ease 快-慢-慢 = cubic-bezier(0.25,0.1,0.25,1)
ease-in 快-快 = cubic-bezier(0.42,0,1,1)
ease-out 慢-慢 = cubic-bezier(0,0,0.58,1)
ease-in-out 慢-快-慢 = cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n) 自定义
*/
transition-timing-function: ease-in-out;
/* 定义过渡效果什么时候开始 */
transition-delay: 1s;
/* 一秒之后开始*/
/* 简写方式 transition: property duration timing-function delay; */
transition: all 1s ease-in-out 2s;
}
.transiton_demo:hover {
height: 150px;
width: 150px;
}
/*
@keyframes 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用
animation-name 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
animation-duration 检索或设置对象动画的持续时间
animation-timing-function 检索或设置对象动画的过渡类型 和transition-timing-function类似
animation-delay 检索或设置对象动画的延迟时间
animation-iteration-count 检索或设置对象动画的循环次数 infinite无限次数
animation-direction 检索或设置对象动画在循环中是否反向运动
animation-play-state 检索或设置对象动画的状态 paused停止 running启动
*/
.animation_demo {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f40;
animation-name: mymove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
/* 简写方式 */
/* animation: name duration timing-function delay iteration-count direction play-state;
这里的意思就是mymove动画将在三秒钟后开始，以两秒一个循环慢-快-慢方式，进行动画的展示，并且每次动画过后都会向相反方向执行动画。
*/
}
@keyframes mymove {
0% {
width: 50px;
height: 50px;
}
50% {
width: 100px;
height: 100px;
}
100% {
width: 50px;
height: 50px;
}
}
/*
none
定义不进行转换。
translate(x,y)
定义 2D 转换。
translate3d(x,y,z)
定义 3D 转换。
translateX(x)
定义转换，只是用 X 轴的值。
translateY(y)
定义转换，只是用 Y 轴的值。
translateZ(z)
定义 3D 转换，只是用 Z 轴的值。
scale(x[,y]?)
定义 2D 缩放转换。
scale3d(x,y,z)
定义 3D 缩放转换。
scaleX(x)
通过设置 X 轴的值来定义缩放转换。
scaleY(y)
通过设置 Y 轴的值来定义缩放转换。
scaleZ(z)
通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle)
定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle)
定义 3D 旋转。
rotateX(angle)
定义沿着 X 轴的 3D 旋转。
rotateY(angle)
定义沿着 Y 轴的 3D 旋转。
rotateZ(angle)
定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle)
定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle)
定义沿着 X 轴的 2D 倾斜转换。
skewY(angle)
定义沿着 Y 轴的 2D 倾斜转换。
perspective(n)
为 3D 转换元素定义透视视图.
*/
.transform_demo {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #f40;
line-height: 100px;
text-align: center;
/* animation:rotate 2s infinite linear; */
/* animation:rotateX 2s infinite linear; */
/* animation:rotateY 2s infinite linear; */
/* animation:translate 2s infinite linear; */
/* animation:translateX 2s infinite linear; */
/* animation:translateY 2s infinite linear; */
/* animation:scale 2s infinite linear; */
/* animation:scaleX 2s infinite linear; */
animation:scaleY 2s infinite linear;
}
/* 旋转 */
@keyframes rotate{
0% {transform:rotate(0deg);}
100% {transform:rotate(360deg);}
}
/* x轴翻转 */
@keyframes rotateX{
0% {transform:rotateX(0deg);}
100% {transform:rotateX(360deg);}
}
/* y轴翻转 */
@keyframes rotateY{
0% {transform:rotateY(0deg);}
100% {transform:rotateY(360deg);}
}
/* 移动 x,y */
@keyframes translate{
0% {transform:translate(0px,0px);}
50% {
transform:translate(100px,100px);
}
100% {transform:translate(0px,0px);}
}
/* 移动 x轴 */
@keyframes translateX{
0% {transform:translateX(0px);}
100% {transform:translateX(100px);}
}
/* 移动 y轴 */
@keyframes translateY{
0% {transform:translateY(0px);}
100% {transform:translateY(100px);}
}
/* 缩，放 x,y */
@keyframes scale{
0% {transform:scale(0.1,0.1);}
100% {transform:scale(1,1);}
}
/* 缩，放 x */
@keyframes scaleX{
0% {transform:scaleX(0.1);}
100% {transform:scaleX(1);}
}
/* 缩，放 y */
@keyframes scaleY{
0% {transform:scaleY(0.1);}
100% {transform:scaleY(1);}
}
/* 扭曲 x,y */
@keyframes skew{
0% {transform:skew(0deg,0deg);}
100% {transform:skew(25deg,25deg);}
}
/* 水平扭曲 */
@keyframes skewX{
0% {transform:skewX(0deg);}
100% {transform:skewX(25deg);}
}
/* 垂直扭曲 */
@keyframes skewY{
0% {transform:skewY(0deg);}
100% {transform:skewY(25deg);}
}
</style>
<body>
<div class="transiton_demo"></div>
<div class="animation_demo"></div>
<div class="transform_demo">
111
</div>
</body>
</html>
