过渡:
显示某个属性【值变化】的过程
div{
width: 100px;
height: 100px;
background-color: red;
/* 复合属性写法 */
/* transition: width 1s,background-color 1s; */
/* 查看哪个属性过渡过程 */
transition-property: width,background-color;
/* 过渡时间 */
transition-duration: 2s,5s;
/* 迟延执行过渡效果 */
transition-delay: 1s;
}
动画
定义动画
@keyframes 动画名字{
动画过程
}
动画可以定义多个:
初始化:一开始,初始化只会执行一次
定义思路:
1:找到初始化的样式;————>form
2:确定变化后的样式;————>to
3:确定如何变化的,变化的过程;————>form..to..改为0%...100%
动画:
1:如何定义动画,定义动画是【未执行】的
2:如何执行动画
3:怎么执行:执行时间,执行速度,延迟时间等。。。
注意:动画通常与过渡结合使用
@keyframes abc {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
.bac {
width: 100px;
height: 100px;
/* 执行定义的bac动画 */
animation-name: bac;
/* 执行时间2s */
animation-duration: 2s;
/* 执行速度:匀速 */
animation-timing-function: linear;
/* 执行次数:无限次 */
animation-iteration-count: infinite;
transition: 0.5s;
/* transform-origin: 30px 30px; */
}