CSS-0815-CSS3层叠详解、animation动画属性详解、定义动画、使用动画、animation动画属性的复合写法、动画属性和过渡属性transition的区别

猫九旭

于 2022-08-15 22:40:16 发布

阅读量353

点赞数

文章标签： css3 css 动画

本文链接：https://blog.csdn.net/qq_44849572/article/details/126356217

版权

本文详细介绍了CSS3的层叠属性和动画特性，包括如何定义动画、使用@keyframes规则，以及如何应用动画属性。强调了animation属性的复合写法，并对比了动画与过渡的区别，指出动画能实现更复杂的动画效果并可无限次执行。

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

CSS3层叠属性：

z-index层叠参考：https://segmentfault.com/a/1190000014712415

定义元素在什么时间干什么事

两种形式：

/* 第一种 */
@keyframes 动画名{
   
   /*  关键帧 */
    from{
   }   /* 动画开始时的状态 */
    to{
   }     /* 动画结束时的状态 */
}

@keyframes 动画名{
   
    /*  关键帧 */
    0%{
   }--0s
    20%{
   }--1s
    40%{
   }--2s
    60%{
   }--3s
    80%{
   }--4s
    100%{
   }--5s
}

关注