一路繁花似锦绣前程
失败的越多,成功才越有价值

导航

 

一、animation循环播放

div{
    position:absolute;
    animation:mymove 1s linear infinite alternate forwards;
}

@keyframes mymove{
    from {left:0px;}
    to {left:200px;}
}
linear:匀速、infinite:循环、alternate:奇数次正向,偶数次反向、forwards:在动画结束后,动画将应用该属性值

 

二、transform单次变换

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: all 0.3s linear;
  transform-origin: left top;
}

div:hover {
  width: 200px;
  height:200px
}
/*
div:hover {
  transform: scale(2);
}
*/

 

posted on 2020-06-13 11:00  一路繁花似锦绣前程  阅读(143)  评论(0编辑  收藏  举报