css 常用动画效果_宽度变化 动画

css 常用动画效果

1.上下运动动画

 <div class="box">
  <div class="item"></div>
</div>
1
2
3

• 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);
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2.宽度变化动画

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