css 常用动画效果

css 常用动画效果

1.上下运动动画

 <div class="box">
  <div class="item"></div>
</div>

• css

.box {
  position: relative;
}

.item {
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: red;
  top: 18px;
  animation: move-up-and-down 2s linear infinite;
}

@keyframes move-up-and-down {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

2.宽度变化动画

div {
  width: 50px; 
  height: 20px; 
  background-color: #ccc; 
  transition: width 1s; /* 宽度变化效果，过渡时间为1秒 */
}
div:hover {
  width: 200px; /* 鼠标悬停时的宽度 */
}