具体学习地址：http://www.imooc.com/learn/33
CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画;

tranform: rotate旋转/skew扭曲/scale缩放/translate移动/matrix矩阵变形;

transition: property/当设置为all时，表示更改所有中点值的属性 /duration/设置过渡所需要的时间/ timing-function过渡函数，设置过渡的各种状态/ delay;

animation: KeyframesName/关键帧，其内容可以设置根据百分比的增大而进行样式的变化.（Name属性必须跟Keyframes的属性保持一致）/ duration/CSS3动画播放时间/ timing-function/来设置动画播放方式 delay/用来定义动画开始播放的时间/ iteration-count direction/定义动画的播放次数。/direction/主要用来设置动画播放方向/ play-state/控制元素动画的播放状态。/ fill-mode/定义在动画开始之前和结束之后发生的操作/;

css3动画学习笔记的更多相关文章

  1. Android动画学习笔记-Android Animation

    Android动画学习笔记-Android Animation   3.0以前,android支持两种动画模式,tween animation,frame animation,在android3.0中 ...

  2. Unity Shader序列帧动画学习笔记

    Unity Shader序列帧动画学习笔记 关于无限播放序列帧动画的一点问题 在学shader的序列帧动画时,书上写了这样一段代码: fixed4 frag(v2f i){ // 获得整数时间 flo ...

  3. css3动画学习资料整理

    现在主流浏览器(先不管IE8,IE9吧),尤其是移动端浏览器基本都支持css3了,为了增强页面的表现力,css3动画必不可少了.这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料,并附上两个 ...

  4. Canvas 数学、物理、动画学习笔记一

    Canvas 第五章 数学.物理和运动学习笔记让人映像深刻的运动,需要我们不只是简单的知道如何移动对象,还需要知道怎么按用户期望看到的方式去移动它们.这些需要基于数学知识的基本算法和物理学作用.基于点 ...

  5. Windows Phone 7 ListBox 列表项渐显加载动画学习笔记

    在wp7程序中,当程序功能越来越复杂时,性能问题是我们不得不考虑的一个问题.在聊天列表中,如果聊天项过多,而且项目UI组件足够复杂时, 我们不得不想尽办法让UI尽快加载.所以有一种可行的方案,就是像Q ...

  6. CSS3 Animation学习笔记

    Internet Explorer 9,以及更早的版本, 不支持 @keyframe 规则或 animation 属性. Internet Explorer 10.Firefox 以及 Opera 支 ...

  7. 《The Book of CSS3》学习笔记

    一.浏览器前缀 E{ -moz-name : value; /* Firefox */ -ms-name : value; /* IE */ -o-name : value; /* Opera */ ...

  8. UIView动画学习笔记

    UIView的动画是通过修改控件的属性来达到动画的效果,如:渐变, 移动. 废话不多说,直接上代码: - (void)loadView{ [super loadView]; _leftView = [ ...

  9. css3动画相关笔记

    1.$(".aa").delay(2500).animate({width:0}); // 延迟 2.setTimeout(function(){ --> css3 anim ...

随机推荐

  1. java获取当前文件路径 [转]

    1.如何获得当前文件路径 常用: 字符串类型:System.getProperty("user.dir"); 综合: package com.zcjl.test.base; imp ...

  2. Autofac is designed to track and dispose of resources for you.

    https://autofaccn.readthedocs.io/en/latest/best-practices/ Autofac is designed to track and dispose ...

  3. nrm npm源管理利器

    nrm npm源管理利器 nrm是管理npm源的一个利器. 有时候我们用npm install 安装依赖时会非常的慢,是官方自身的npm本来就慢,然后我们会尝试安装淘宝的npm或者cnpm,这些安装切 ...

  4. angularjs笔记（1）

    https://github.com/angular/angular.js/blob/master/src/ng/q.js 1.ng-app 指令告诉 AngularJS,<div> 元素 ...

  5. js中的BOM对象

    浏览器对象模型(BOM)以 window 对象为依托,表示浏览器窗口以及页面可见区域.同时, window对象还是 ECMAScript 中的 Global 对象,因而所有全局变量和函数都是它的属性, ...

  6. Android GridView 行间距过大（一页一行）

    1. gridView.xml中 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&quo ...

  7. DCGAN、WGAN、WGAN-GP、LSGAN、BEGAN原理总结及对比

    DCGAN.WGAN.WGAN-GP.LSGAN.BEGAN原理总结及对比 from:https://blog.csdn.net/qq_25737169/article/details/7885778 ...

  8. QT Designer 的汉化

    Designer是很好用的设计器,通过 pip 安装PyQt5之后,一般都是英文的 所以给有需要的人带来汉化的包(这个是通过替换  translations 文件夹来实现的) translations ...

  9. 【pat-1074】宇宙无敌加法器(高精度)

    链接:https://www.patest.cn/contests/pat-b-practise/1074 地球人习惯使用十进制数,并且默认一个数字的每一位都是十进制的.而在PAT星人开挂的世界里,每 ...

  10. 【ccf2017-12-2】游戏(模拟)

    问题描述 有n个小朋友围成一圈玩游戏,小朋友从1至n编号,2号小朋友坐在1号小朋友的顺时针方向,3号小朋友坐在2号小朋友的顺时针方向,……,1号小朋友坐在n号小朋友的顺时针方向. 游戏开始,从1号小朋 ...