CSS动画【animation】_css animation-程序员宅基地

技术标签： css

一、动画(animation)

动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。

动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

1、动画的基本使用

先定义动画
在调用定义好的动画

2、语法

   @keyframes 动画名称 {
       0% {
           width: 100px;
       }
       100% {
           width: 200px
       }
   }

调用动画

   div {
   	/* 调用动画 */
       animation-name: 动画名称;
    	/* 持续时间 */
    	animation-duration: 持续时间；
   }

二、动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

应用：

  @keyframes move {
            /* from{
                transform: translate(0,0);
            }
            to {
                transform: translate(1000px,0);
            } */
            0% {
                transform: translate(0,0);
            }
            25% {
                transform: translate(1000px,0);
            }
            50% {
                transform: translate(1000px,500px);
            }
            75% {
                transform: translate(0,500px);
            }
            100% {
                transform: translate(0,0);
            }
        }

三、动画常见属性

代码应用

 div {
            width: 100px;
            height: 100px;
            background-color: aquamarine;
            /* 动画名称 */
            animation-name: move;
            /* 持续时间 */
            animation-duration: 4s;
            /* 动画速度曲线 */
            animation-timing-function: ease;
            /* 动画开始时间 */
            animation-delay: 1s;
            /* 动画播放次数 */
            /* animation-iteration-count: 2; */
            /* 动画播放方向 */
            /* animation-direction: alternate; */
            /* 动画结束后状态 */
            animation-fill-mode: forwards;
        }
        div:hover {
            animation-play-state: paused;
        }

四、动画简写方式

/* animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

注：

简写里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

本文链接：https://blog.csdn.net/weixin_61466362/article/details/124366598

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

kill端口对应进程_kill 1024端口进程-程序员宅基地

文章浏览阅读1.4k次。@author StormMa @date 2017-02-13 生命不息，奋斗不止！> kill80端口的进程lsof -i :8080|grep -v "PID"|awk '{print "kill -9",$2}'|sh_kill 1024端口进程

从0单排：学风侏儒——零样本学习3篇论文-程序员宅基地

文章浏览阅读394次。Zero shot learning主要是zero-shot learning相关论文的阅读，主要关注于视频方面。零样本问题现在处理视频的很少，主要是因为零样本自身就有不少的急需解决的问题：domain shiftHubness problemsemantic gap详情可以看这篇文章零次学习（Zero-Shot Learning）入门1. 15. Objects2a..._零样本学习论文

vue3 + jsx + antd antd组件的table组件使用必备知识点_antd table组件center关键词-程序员宅基地

文章浏览阅读1.4k次。//vue3+jsx+antd// antd组件中 table组件的使用细节const model = defineComponent({name: ‘model’,setup() {let pageObj = reactive({pageCur: 1, // 当前的页数pageSize: 10, // 一页显示的条数total: 0 //总共的条数})// 表格的第一行一般做为标题内容let tableTitle = [{title: ‘标题1’, // 标题1dataI_antd table组件center关键词

STM32F4寄存器串口DMA汇总-程序员宅基地

文章浏览阅读1.6k次。1.初始化//RCC RCC->APB1ENR|=1<<20; //使能串口5时钟 RCC->APB1ENR|=1<<19; //使能串口4时钟 RCC->APB1ENR|=1<<18; //使能串口3时钟 RCC->APB1ENR|=1<<17; //使能串口2时钟 R..._dma1_stream2

第035讲: 图形界面用户入门：EasyGui | 学习记录（小甲鱼零基础入门学习Python）_easygui图形界面编程入门-程序员宅基地

文章浏览阅读927次。（标答出处: 鱼C论坛）《零基础入门学习Python》测试题：_easygui图形界面编程入门

用IntelliJ IDEA 社区版配置web开发环境-程序员宅基地

文章浏览阅读2.4k次。IntelliJ IDEA社区版缺少的是Web方面的开发模块旗舰版：社区版：要用 IDEA 社区版进行web开发的话，需要自己手动配置由于IDEA社区版（Commun..._idea社区版指定不了环境

随便推点

使用object_detection_api进行训练和预测_object_detector.create 设置迭代次数-程序员宅基地

文章浏览阅读5.7k次，点赞3次，收藏3次。使用object_detection_api进行训练和预测将object_detection_api安装好以后，我们可以使用其进行transfer learning从而实现对新检测应用的快速学习，当然也可以使用训练好的模型进行预测。以下分别讲如何使用现有模型进行预测以及在训练好的模型基础上使用新数据集学习新的模型。官网提供了在linux下使用的说明，这里说明如何在windows下进行使用，..._object_detector.create 设置迭代次数

Linux常用命令整理（适合初学）_linux常用命令大全新手入门-程序员宅基地

文章浏览阅读3.1k次，点赞6次，收藏38次。常用命令整理（适合初学）_linux常用命令大全新手入门

VMware下的Centos6.7安装VMware-Tools与共享文件夹使用问题_vcsa 6.7系统共享文件夹-程序员宅基地

文章浏览阅读792次。虚拟机Centos系统安装VMware-Tools详细步骤1.找到虚拟机选项，安装VMWare Tools(ps:我已经安装过会显示重新安装)2.下载好后啥都不用管，先在Centos中开启终端进入该下载路径下的光驱命令：cd /media/VMware\ Tools/ <Tools前面有空格>命令：ls -l <ll怕看错成1，就还是写全写吧>3.解压..._vcsa 6.7系统共享文件夹

python成绩录入系统gui_Python GUI项目实战（一）登录窗体的设计与实现-程序员宅基地

文章浏览阅读1.1k次。前言前面我们学习了Python GUI 图型化界面Tkinter的基础知识，为了检测我们的学习成果，学以致用。我们从今天开始做一个综合Tkinter案例--基于Tkinter的学生信息管理系统，一方面熟悉Tkinter项目的开发，另一方面可以把我们前面的学习专辑《小雨学Python》的知识综合在一起。基础功能介绍说明：由于我们尚未学习数据库的内容，所以我们这个应用程序开发的过程中，暂时通过文件的读..._self.geometry

android studio集成百度云推送项目实战注意事项-程序员宅基地

文章浏览阅读627次，点赞7次，收藏30次。说一千道一万，不如自己去行动。要想在移动互联网的下半场是自己占有一席之地，那就得从现在开始，从今天开始，马上严格要求自己，既重视业务实现能力，也重视基础和原理。基础夯实好了，高楼才能够平地而起，稳如泰山。最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2020-2021面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有。

gbk与gb2312的区别_c#中gbk和gb2312有什么区别-程序员宅基地

文章浏览阅读763次。gbk与gb2312的区别举报描述不清违规检举侵权投诉|分享|2011-08-30 12:07 maozi_zhang | 浏览 61443 次可选中1个或多个下面的关键词，搜索相关资料。也可直接点“搜索资料”搜索整个问题。gbk 搜索资料我有更好的答案举报描述不清违规检举侵权投诉|2011-08-30 12:30 网友采纳_c#中gbk和gb2312有什么区别