CSS3 动画体验自动播放动画(animation,@keyframes)

最新推荐文章于 2024-07-31 16:59:37 发布

houyanhua1

最新推荐文章于 2024-07-31 16:59:37 发布

阅读量4.1k

点赞数 3

本文链接：https://blog.csdn.net/houyanhua1/article/details/79665377

版权

本文探讨了如何使用CSS3的`animation`属性和`@keyframes`规则创建自动播放的动画效果。通过实例代码`demo.html`，详细解释了CSS3动画的工作原理和实现步骤，帮助读者掌握在网页中实现动态视觉效果的方法。

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

demo.html：

<!DOCTYPE html>                
<html lang="en">                
<head>                
    <meta charset="UTF-8">                
    <title>Document</title>                
    <style>        
        .box {      
            width: 250px;      
            height: 250px;      
            margin: 100px auto;    
            background-color: red;    
      
            animation: am1 2s linear infinite alternate 1s;  /* 动画持续时间 匀速 运动次数(循环) alternate(往返运动)  1s(延迟)*/      
              
  
            /* 详细属性 */  
            animation-name: am1;     /* 动画名称 */  
            animation-duration: 2s;   /* 动画持续时间 */  
            animation-iteration-count: 3;   /* 动画次数  infinite:无限播放 */  
            animation-direction: alternate;   /* 往返运动 */  
            animation-delay: 1s;     /* 延迟时间 */