animation和transition两种方法实现简单动画

最新推荐文章于 2023-11-24 17:39:23 发布

小菜鸟的baba

最新推荐文章于 2023-11-24 17:39:23 发布

阅读量852

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_44517681/article/details/107892664

版权

本文介绍了CSS3中的animation和transition属性用于创建简单动画的方法。通过示例代码展示了如何使用animation定义动画关键帧，实现元素尺寸持续无限循环变化。同时讲解了transition属性的应用，包括鼠标悬停时元素透明度变化和尺寸变化的效果，强调了transition中属性值与持续时间的对应关系。

摘要由CSDN通过智能技术生成

animation和transition都是css3中新增的属性，面试中被问到的几率非常大，今天来简单的使用下，主要实现一个长宽为100px的框变为长宽为200px
（1）animation
在这里插入图片描述
看概念可能不太理解，上代码

<style>
.test{
   
    /* infinite自动播放 */
    width: 100px;
    height: 100px;
    background-color:burlywood;
    animation: mymove 5s infinite;
}

@keyframes mymove{
   
    0% {
   width: 100px;height: 100px;