• CSS3动画animation

    一、语法

    animation: animation-name(创建的动画名)

                      animation-duration(动画时间)

                      animation-timing-function(动画方式) 

                      animation-delay(延迟时间)

                      animation-iteration-count(动画的播放次数)

                      animation-direction(动画的播放方向)

                      animation-play-state(动画的播放状态)

                      animation-fill-mode(动画发生的操作)；

    二、详细介绍

    1.动画的动画方式（animation-timing-function）

    linear： 匀速运动

    ease：速度由快到慢（默认值）

    ease-in：速度越来越快

    ease-out： 速度越来越慢

    ease-in-out： 速度先加速再减速

    2.动画的播放次数（animation-iteration-count）

    默认值为1

    infinite： 循环

    3.动画的播放方向（animation-direction）

    normal： 动画每次都是循环向前播放

    alternate： 动画播放为偶数次则向前播放

    4.动画的播放状态（animation-play-state）

    running：将暂停的动画重新播放

    paused：将正在播放的元素动画停下来

    5.动画发生的操作（animation-fill-mode）

    forwards：表示动画在结束后继续应用最后关键帧的位置

    backwards：表示会在向元素应用动画样式时迅速应用动画的初始帧

    both：表示元素动画同时具有forwards和backwards的效果

    三、案例

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>title>
    6. 		<style>
    7. 			div{
    8. 				height: 30px;
    9. 				width: 30px;
    10. 				background-color: red;	
    11. 				animation: donghua 1s linear 0s infinite normal;
    12. 			}		
    13. 			@keyframes donghua{
    14. 				0%{
    15. 					transform: translate(0px,0px);	
    16. 				}
    17. 				25%{
    18. 					transform: translate(50px,0px);
    19. 				}
    20. 				50%{   
    21. 					transform: translate(100px,0px);
    22. 				}
    23. 				75%{
    24. 					transform: translate(50px,0px);
    25. 				}
    26. 				100%{
    27. 					transform: translate(0px,0px);
    28. 				}				
    29. 		style>		
    30. 	head>
    31. 	<body>	
    32. 		<div>div>
    33. 	body>
    34. html>

  • 相关阅读:
    Grafana+Prometheus实现对clickhouse的监控
    np.linspace精确度
    股指期权交割日大盘必跌吗？
    Spark 之 deploy
    使用Redis实现分布式锁
    Java 近期新闻：JDK 19 进入 RDP2、Oracle 关键补丁更新、TornadoVM on M1、Grails CVE
    『亚马逊云科技产品测评』活动征文｜利用EC2云服务器快速部署一个SpringBoot项目
    SpringBoot+Thymeleaf上传头像并回显【表单提交】
    XSS漏洞介绍
    VuePress 不用Algolia 全文搜索那就缺了灵魂
  • 原文地址：https://blog.csdn.net/qq_52421092/article/details/126160250