首页 > 其他分享 >vue学习第15天 CSS ---- 动画animation

vue学习第15天 CSS ---- 动画animation

时间:2023-06-20 11:56:23浏览次数:35  
标签:动画 vue 15 定义 调用 ---- animation CSS

                  动画

动画(animation)是CSS3中具有颠覆性特征之一,可通过设置多个节点来精确控制一个或一组动画。常用来实现复杂的动画效果。

相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。动画的优点(与过渡相比更好)

 

1、动画的基本使用(先定义后调用)

  制作动画分为两步:

  1)先定义动画

  2)再使用(调用)动画

  

  1)用keyframes定义动画(类似定义类选择器、媒体查询)

    写法: 定义

     

    动画序列: 0%是开始, 100%是结束 或者 from、 to

 

  2)元素使用动画 调用动画

  

 

   3)实现动画 移动一圈

  

  

 

2、动画常见属性 **重点**

  

 

3、动画简写属性

  animation :1)动面名称   2)持续时间   3)运动曲线   4)何时开始    5)播放次数     6)是否反方向     7) 动画起始或者结束的状态。

  例子:animation: move 2s linear 0s 1 alternate forwards;

  注意:

  

   作业:写出大数据热点图demo  

4、速度曲线细节

  animation-timing-function :规定动画的速度曲线,默认是"ease”

  

  重点是steps(): 类似于打字机效果 

 

5、添加多个动画写法(逗号分隔)

  

 

标签:动画,vue,15,定义,调用,----,animation,CSS
From: https://www.cnblogs.com/changdasheng/p/17407864.html

相关文章

  • 欧姆龙cp1E plc和台达变频器modbus rtu通讯
    欧姆龙cp1Eplc和台达变频器modbusrtu通讯所需硬件:CP1Eplcn30s1dt,台达vfd。功能:变頻器可实现正反转,停止,频率的设定、加减速,以及频率,电流,电压,运行状态的读取,效果如图。配套plc,威纶触摸屏程序,按线和参数设置说明欧姆龙的CP1EPLC和台达的变......
  • 在这个大环境下我是如何找工作的
    蛮久没更新了,本次我想聊聊找工作的事情,相信大家都能感受到从去年开始到现在市场是一天比一天差,特别是在我们互联网IT行业。已经过了18年之前的高速发展的红利期,能做的互联网应用几乎已经被各大公司做了个遍,现在已经进入稳定的存量市场,所以在这样的大背景下再加上全世界范围......
  • 程序员的噩梦:接手别人的代码,二次开发...
    故事纯属虚构,如有雷同,纯属雷同开端小吹是一个自由职业的程序员,没有了每个月的固定工资,只能一边开发自己的独立App,一边靠接外包单子来维持生活这样子。他手头上的外包项目已经完结了,正在努力寻找下一个项目。已经闲了一个星期了,小吹心里有点慌。这时候,客户小白找上门来了。小......
  • Dtu 解决方案 源代码GPRS DTU方案 包括项目所有代码、原理图、PCB
    Dtu解决方案源代码GPRSDTU方案包括项目所有代码、原理图、PCB文件。本项目经历过4个月的测试,bug总量在一个非常低的水平。方案包括以下部分:Dtu硬件代码:(MCU:STM32F103C8T6?模块:移远m26)Dtu上位机代码:(环境C++和VB)Dtu配置软件代码:(环境C++和VB)Dtu生产测试软件代码:(环境C++和VB)DTU生......
  • 桥接模式-09
    概述桥接模式(BridgePattern)又称柄体(HandleandBody)模式、接口模式。它将可能有着继承关系的对象的抽象和实现分离,使得两者可以独立地变化。优点:分离了抽象部分和实现部分,提高了灵活性和可扩展性,隐藏了实现的细节。缺点:降低了系统可理解性,提高了设计难度,有一定的局限......
  • Caused by: javax.xml.stream.XMLStreamException: ParseError at [row,col]:[2,6] Me
     报错如下:Causedby:javax.xml.stream.XMLStreamException:ParseErrorat[row,col]:[2,6]Message:不允许有匹配"[xX][mM][lL]"的处理指令目标。原因:xml第一行为空行,所以报错 需要将<?xmlversion="1.0"encoding="utf-8"?>放在第一行即可解决问题  ......
  • 【剑指 Offer】数组中重复的数字(C++_Easy_遍历/哈希/快排/原地)
    题目在一个长度为n的数组nums里的所有数字都在0~n-1的范围内。数组中某些数字是重复的,但不知道有几个数字重复了,也不知道每个数字重复了几次。请找出数组中任意一个重复的数字。测试样例输入:[2,3,1,0,2,5,3]输出:2或3限制2<=n<=100000题解题解一:遍历对vector容器......
  • 【年度总结】写给2020年的自己
    这篇总结是在跨年夜那天晚上写的,后来犹豫了很久没有发出来,但是人总是要坦然且勇敢地面对自己的不足,于是就有了这篇blog。写给2020年的自己:        2020年初本打算留校学习,但新冠来袭,恰逢感冒伤寒,遂归家养病。寒假期间对算法比较感兴趣于是刷了不少题,准备在随后的PAT和CCF......
  • 【Fidder网络抓包+Python爬虫】下载微信小程序视频
    首先声明本篇博客以学习为目的,侵权即删。文章目录1.Fidder抓包1.1在电脑上打开微信小程序视频播放页以及Fidder软件1.2点击视频播放按钮,并查看Fidder抓到的数据包2.Python爬虫2.1视频下载2.2视频合并2.3完整代码3.写在最后1.Fidder抓包       关于fidder软件的安......
  • 【数据库原理、编程与性能】Integrity, View, Security
    文章目录1.IntegrityConstrains1.1Definition1.2实施机制1.3IntegrityConstraintsinCreateTableStatement1.3.1CreateTable1.3.2ColumnConstraints1.3.3TableConstraints.1.4AlterTableStatement1.5Trigger1.5.1CreateTriggerStatement1.5.2DropTrigger......