css常用动画

一、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);
}
*/