transition: 过渡动画
transition-property: 属性
transition-duration: 间隔
transition-timing-function: 曲线
transition-delay: 延迟
常用钩子: transitionend
animation / keyframes

animation-name: 动画名称，对应@keyframes
animation-duration: 间隔
animation-timing-function: 曲线
animation-delay: 延迟
animation-iteration-count

: 次数
infinite: 循环动画
animation-direction

: 方向
alternate: 反向播放
animation-fill-mode

: 静止模式
forwards: 停止时，保留最后一帧
backwards: 停止时，回到第一帧
both: 同时运用 forwards / backwards
常用钩子: animationend
动画属性: 尽量使用动画属性进行动画，能拥有较好的性能表现
translate
scale
rotate
skew
opacity
color

可在此网址查看并编辑代码：https://www.w3school.com.cn/tiy/t.asp?f=css3_animation

CSS动画animation的更多相关文章

  1. amazeui学习笔记--css（常用组件15）--CSS动画Animation

    amazeui学习笔记--css(常用组件15)--CSS动画Animation 一.总结 1.css3动画封装:CSS3 动画封装,浏览器需支持 CSS3 动画. Class 描述 .am-anim ...

  2. css动画-animation各个属性详解（转）

    CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①a ...

  3. 深入理解CSS动画animation

    × 目录 [1]定义 [2]关键帧 [3]动画属性 [4]多值 [5]API 前面的话 transition过渡是通过初始和结束两个状态之间的平滑过渡实现简单动画的:而animation则是通过关键帧 ...

  4. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  5. css动画 animation

    今天用css做了一个简单的三角上下移动的一个小动画,说白了就是在改变该物体的height值.除了这个方法,还可以用js. 一.在用css写动画时,一定要记住兼容性问题.如何解决该兼容性?在前面加内核前 ...

  6. css 动画animation基本属性(干货)

    /* 动画名称 */ animation-name: cloud; /* 属性定义动画完成一个周期所需要的时间,以秒或毫秒计 */ animation-duration:1s; /* 属性定义动画何时 ...

  7. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  8. 使用css动画实现领积分效果

    最近项目中要做一个领积分的效果,根据老板的描述,这个效果类似于支付宝蚂蚁森林里的领取能量.整体效果是就是在树周围飘着几个积分元素,上下滑动,类似星星闪烁,点击领取后,沿着树中心的位置滑动并消失,树上的 ...

  9. CSS动画效果之animation

    Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...

随机推荐

  1. ubuntu 19.10 中防火墙iptables配置

    $sudo which iptables   /usr/sbin/iptables说明有安装 如果没有安装,那么使用sudo apt-get install iptables 安装. 刚装机,是这个样 ...

  2. 实验五  用PS制作图文合成海报

    实验五  用PS制作图文合成海报 [实验目的] ⑴.熟悉PS软件基本操作 ⑵.学会用PS制作内容较丰富的海报式广告 [实验条件] ⑴.个人计算机一台 ⑵.个人计算机中预装Windows7操作系统和浏览 ...

  3. Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例

    一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...

  4. C++虚函数与多继承

    虚函数 C++用虚函数实现运行时多态,虚函数的实现是由两个部分组成的,虚函数指针与虚函数表. 虚函数指针(vptr)是指向虚函数表的指针,在一个被实例化的对象中,它总是被存放在该对象的地址首位.而虚函 ...

  5. iproute2工具

    iproute2工具介绍 iproute2是linux下管理控制TCP/IP网络和流量控制的新一代工具包,出现目的是替代老工具链net-tools.net-tools是通过procfs(/proc)和 ...

  6. 源生代码和H5的交互 android：

    1: 默认的事情: Android 通过内置的UI控件WebView来加载网页.         网页是用一个网络地址来表示的:         其整个使用方法很简单如下:(android不关心实际的 ...

  7. python 爬虫可视化函数，可以先看看要爬取的数据是否存在

    import requests url = "http://www.spbeen.com" headers = { "User-Agent":"tes ...

  8. uvalive6468,51cthink1419 Strange Antennas (离散化)

    题意: 在一个 n x n 的平面上,给定 m 个等腰直角三角形(各点均为整数),问该平面上被三角形覆盖奇数次的点有多少个. 思路: 由于 n 较大,不能模拟解决,故使用离散化思想. 考虑每一行有多少 ...

  9. git学习(六) git reset操作

    git reset 操作 git reset git reset HEAD 文件名 移除不必要的添加到暂存区的文件 git reset HEAD^ 或者 commitid 去掉上一次的提交 git r ...

  10. 今天 1024，为了不 996，Lombok 用起来以及避坑指南

    Lombok简介.使用.工作原理.优缺点 Lombok 项目是一个 Java 库,它会自动插入编辑器和构建工具中,Lombok 提供了一组有用的注解,用来消除 Java 类中的大量样板代码. 目录 L ...