您的位置：首页 > Web前端 > CSS

css3动画基础语法01

2017-05-18 11:56 441 查看

一，动画的使用必须要准备

1，准备动画@keyframes关键字定义

2，需要为想要使用动画的dom元素添加一系列的动画属性。

/* 1，定义动画 */
@keyframes toright{
from{
/*  from中如果不设置默认使用的是 初始状态 */
}
to{/* 移动方向 */
transform:translateX(800px);
}
}
/* 2，准备class 内部定义了动画的各种效果 */
.animation{
/* 动画的名字 */
animation-name:toright;
/*  动画持续多久 */
animation-duration:2s;
/*   设置动画的次数  infinite是无限*/
animation-iteration-count:infinite;
/*  动画的速度 线性 linear匀速 */
animation-timing-function:linear;
/*  动画的延迟时间 */
animation-delay:2s;
/*  动画的填充方式 */
animation-fill-mode:both;
}
/* 动画属性的符合写法： */
.animation-oneline{
/* 复合写法：
第一次出现的时间是持续时间，
第二次出现的时间是延迟时间。 */
animation<
4000
/span>:toright 1s 2s linear infinite;
}

二，精确设置动画的过程，分步设置动画

@keyframes stepAnimation{/* 动画可以分成多段 */
/*   起始状态 */
0%{

}
/*   动画播放一半 */
50%{
transform:translateX(1000px);
}
/* 返回到起始位置 */
100%{
transform:translateX(0);
}
}
.animation{
animation:toright 1s 2s stepAnimation;
}

三，小汽车案例：

从左到右后旋转180度

@keyframes autoMove{
0%{}
/*  移动到最右边 */
45%{
transform:translateX(1000px);
}
/* 原地旋转180度 */
50%{
/* 在移动到最右的基础上原地旋转translateX(1000px)，否则会瞬间回到起始位置 */
transform: translateX(1000px) rotateY(180deg);
}
/*  移动回最左边 */
95%{
transform: translateX(0px) rotateY(180deg);
}
}
.animation{
/* 3秒钟匀速播放 */
animation:autoMove 3s linear infinite;
}

四，动画暂停，鼠标悬停：

animation-play-state:paused;

<style>
body{
perspective:1000px;
}
.container{
width: 200px;
height: 200px;
margin: 100px auto;
border: 1px solid gray;
background: url("wjtz.jpg") no-repeat center/cover;
position: relative;
transform-style:preserve-3d;
}
.item{
width:100%;
height: 100%;
position: absolute;
background: url("lf.jpg") no-repeat center/cover;
}
.item:nth-child(1){
transform:rotateY(0deg) translateZ(300px);
}
.item:nth-child(2){
transform:rotateY(60deg) translateZ(300px);
}
.item:nth-child(3){
transform:rotateY(120deg) translateZ(300px);
}
.item:nth-child(4){
transform:rotateY(180deg) translateZ(300px);
}
.item:nth-child(5){
transform:rotateY(240deg) translateZ(300px);
}
.item:nth-child(6){
transform:rotateY(360deg) translateZ(300px);
}
@keyframes autoMove{
from{}
to{
transform:rotateY(300deg);
}
}
.animation{
/* 3秒钟匀速播放 */
animation:autoMove 3s linear infinite;
}
/* 鼠标悬停时停止动画 */
.container:hover{
/*  动画状态 */
/* 如果要使用js操作该属性语法是:dom.style.animationPlayState="paused"; */
animation-play-state:paused;
/* 这里如果给animation重新赋值的话，会覆盖掉以上的animation效果，鼠标经过也会停止，但是不会是从鼠标悬停的那张图片开始播放，而是重新开始播放。 */
/*   animation:haha; */
}

</style>
</head>
<body>
<div class="container animation">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航