以下不是css3新增的模块,CSS3 新增 动画模块_过渡 动画 往返动画

过渡移动

div{

width: 100px; height: 50px;

background-color: red;

transition-property: margin-left;

transition-duration: 3s;  }

div:hover{ margin-left: 500px; }

动画

div{

width: 100px;

height: 50px;

background-color: red;

/*transition-property: margin-left;*/

/*transition-duration: 3s;*/

/*1.告诉系统需要执行哪个动画，lnj阔以随意命名，和下面保持一致即可*/

animation-name: lnj;

/*3.告诉系统动画持续的时长*/

animation-duration: 3s;

}

/*2.告诉系统我们需要自己创建一个名称叫做lnj的动画*/

@keyframes lnj {

from{

margin-left: 0;

}

to{

margin-left: 500px;

}

}

/*div:hover{*/

/*margin-left: 500px;*/

/*}*/

效果展示：

1.过渡和动画之间的异同

1.1不同点

过渡必须人为的触发才会执行动画

动画不需要人为的触发就可以执行动画

1.2相同点

过渡和动画都是用来给元素添加动画的

过渡和动画都是系统新增的一些属性

过渡和动画都需要满足三要素才会有动画效果

限制次数往返动画

div {

width: 100px;

height: 50px;

background-color: red;

animation-name: sport;

animation-duration: 2s;

/*告诉系统多少秒之后开始执行动画*/

/*animation-delay: 2s;*/

/*告诉系统动画执行的速度*/

animation-timing-function: linear;

/*告诉系统动画需要执行几次*/

animation-iteration-count: 3;

/*告诉系统是否需要执行往返动画

取值:

normal, 默认的取值, 执行完一次之后回到起点继续执行下一次

alternate, 往返动画, 执行完一次之后往回执行下一次

*/

animation-direction: alternate;

}

@keyframes sport {

from{

margin-left: 0;

}

to{

margin-left: 500px;

}

}

div:hover{

/*

告诉系统当前动画是否需要暂停

取值:

running: 执行动画

paused: 暂停动画

*/

animation-play-state: paused;

}

效果展示(中间暂停部分为鼠标悬停导致暂停)：

标签：CSS3,动画,animation,模块,div,执行,margin,left

来源： https://blog.csdn.net/qq_34713831/article/details/100067329