transition ：   平衡过渡

transition是一种css里的一种过渡效果，完成过渡需要多少秒 。延迟几秒开始 ，过渡的速度（一般有 "linear 匀速"  和“ease 先慢后快再慢结束”及“cubic-bezier(n,n,n,n) 自己定义的值，可能的值是 0 至 1 之间的数值”等）

一般transition通过鼠标事件触发 ，如（hover）产生动画效果

animation： 动画

animation 一般通过@keyframes 规则，创建动画。

animation通过关键帧的名称 开始的时间 动画的速度（和上一致外还有一个step-end逐帧播放）是否重复播放（infinite）

进行根据需求进行修改即可

animation一般通过@keframes关键帧的规则来创建动画，可以通过关键字"from"和“to”,或者通过自己定义的百分比进行动画 0%是开始100%是结束

一般在关键帧要进行多个动画效果一般使用百分比 0%和100%之间可以根据自己的要求在分成20%，40%，60%或在细分等

transform： 改变元素的大小、位置

translate：移动

translate（x,y） 定义2D空间

translate（x,y,z） 定义3D空间

这个的移动值可以使用像素px支持负值

scale：放大

scale（数值）定义图片放几倍大（0为不显示,1则是图片原本的大小）

（为放大1.3倍）

rotate：旋转

rotate(x,y)  定义2D空间

rotate(x,y,z)  定义3D空间

这个的旋转值使用deg 旋转了多少度，支持负值

改变旋转点使用“transform-origin”来改变旋转的原点，如把旋转点定在顶部的中心点

skew ：倾斜（扭曲）

skew(x,y)  定义2D空间

skew(x,y,z)  定义3D空间

css3动画属性有哪些的更多相关文章

  1. CSS3动画属性animation的用法

    转载: 赞生博客 高端订制web开发工作组 » CSS3动画属性animation的用法 CSS3提供了一个令人心动的动画属性:animation,尽管利用animation做出来的动画没有flash ...

  2. Css3动画属性总汇

    http://css3lib.alloyteam.com/uilib/animation/demo1/#cta Css3动画属性总汇 Stay hungry. Stay foolish. Attent ...

  3. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

  4. 使用CSS3动画属性实现360°无限循环旋转【代码片段】

    使用CSS3的animation动画属性实现360°无限循环旋转. 代码片段: <div id="test"> <img src="/CSS3/img/ ...

  5. 如何制作css3的3d动画——以骰子旋转为例，详解css3动画属性

    首先先来看两个用css3实现的炫酷的3d动画效果 1 2 3 4 5   6 你没看错,这个炫酷的效果都是用css3实现的. 下面是动画实现所需要用到的几个css3属性. 1.perspective: ...

  6. CSS3动画属性和flex弹性布局各个属性

    [CSS3动画的使用] 1.声明一个关键帧(动画): @keynames name{ from{} to{} } 每个阶段的写法: ①可以直接使用from-to的写法 ②可以设置0%-100%的写法, ...

  7. 使用CSS3动画属性实现各种旋转跳跃

    Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. tran ...

  8. CSS3动画属性之Animation

    首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...

  9. CSS3动画属性：动画(animation)

    一:动画(animation)的参数详解 由于上面用到了animation动画,这里详细介绍下这个animation的参数. 简介 CSS动画(Animations)简单说就是在一段固定的动画时间内暗 ...

  10. css3 动画属性

    transition Internet Explorer 9 以及更早版本的浏览器不支持 transition 属性. Internet Explorer 10.Firefox.Opera 和 Chr ...

随机推荐

  1. 用hash存数组|得地址|取地址

    #!/usr/bin/perl -w use strict; my %hash = %{&collect};my $arr_ad=$hash{'a'};print "$arr_ad\ ...

  2. 爬虫笔记（九）——安装Fiddler

    在ubuntu下不能直接安装Fiddler,我们要先安装mono环境,具体可分为三个步骤: 1.   在终端下输入指令安装mono环境 :sudo apt-get install mono-compl ...

  3. lnmp环境搭建:Centos7 + Nginx1.12.2 + Mysql-5.6.38 + PHP7.2.0

    https://blog.csdn.net/ty_hf/article/details/50622888

  4. django项目班笔记-注册功能

    目录 一.用户模型设计 1.用户表字段分析 2.用户模式设计 二.执行迁移 三.图形验证码 四.将图形验证加入到前端文件中 验证码生成源码:https://files.cnblogs.com/file ...

  5. 006.前端开发知识，前端基础CSS（2020-01-21）

    来源:第五天  01盒子水平居中 一.盒子中文字控制: 1.text-align: center; /*可以让盒子内容(文字 行内元素 行内块元素)居中对齐*/ 二.让盒子水平居中对齐: 方法1.ma ...

  6. 《C程序设计语言》练习1-10

    #include<stdio.h> main() { int c; c=getchar(); while (c !=EOF) { if (c=='\t') { c='\\'; putcha ...

  7. iOS UICollectionViewCell 的拖动

    1.长按cell的情况下实现拖动,所以理应想到用长按手势. 2.既然实现移动cell,就要看看UICollectionView 有没有方法或者协议可以移动的.通过查看UICollectionView的 ...

  8. 吴裕雄--天生自然python学习笔记：pandas模块用 dataframe.loc 通过行、列标题读取数据

    用 df.va lue s 读取数据的前提是必须知道学生及科目的位置,非常麻烦 . 而 df.loc 可直接通过行.列标题读取数据,使用起来更为方便 . 使用 df.loc 的语法为: 行标题或列标题 ...

  9. Win7如何查看nvidia显卡（GPU）的利用率

    1.在文件夹C:\Program Files\NVIDIA Corporation\NVSMI里找到文件nvidia-smi.exe2.把该文件拖到命令提示符窗口(win+R,再输入‘CMD’进入), ...

  10. Qt QString的arg()方法的使用

    1.QString的arg()方法用于填充字符串中的%1,%2...为给定的参数,如 QString m = tr("); // m = "12:60:60: 2.它还有另外一种重 ...