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; /* 鼠标悬停时的宽度 */
}