工作半年了,基本没怎么用到动画,现在对已学到的动画做一个总结(真的非常非常基础啊啊啊),准备之后再慢慢研究一下动画(有好的教程可以推荐给我咩~~)。

animation

animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;

简写:animation: name duration timing-function delay iteration-count direction;

animation-name                    规定需要绑定到选择器的 keyframe 名称。

animation-duration                规定完成动画所花费的时间,以秒或毫秒计。

animation-duration:2s;
-webkit-animation-duration:2s; /* Safari 和 Chrome */

animation-timing-function      规定动画的速度曲线。

animation-timing-function:2s;
-webkit-animation-timing-function:2s; /* Safari 和 Chrome */

值:

  linear 动画从头到尾的速度是相同的。 
  ease 默认。动画以低速开始,然后加快,在结束前变慢。 测试
  ease-in 动画以低速开始。 测试
  ease-out 动画以低速结束。 测试
  ease-in-out 动画以低速开始和结束。 测试
  cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay                    规定在动画开始之前的延迟。

animation-delay:2s;
-webkit-animation-delay:2s; /* Safari 和 Chrome */

animation-iteration-count       规定动画应该播放的次数。

animation-iteration-count:3;
-webkit-animation-iteration-count:3; /* Safari 和 Chrome */

值:

  n 定义动画播放次数的数值。
  infinite 规定动画应该无限次播放。

animation-direction               规定是否应该轮流反向播放动画。

animation-direction:alternate;
-webkit-animation-direction:alternate; /* Safari 和 Chrome */

值:

  normal 默认值。动画应该正常播放。 
  alternate 动画应该轮流反向播放。

@keyframes

@keyframes name{}

@-webkit-keyframes name{}

值:

  0-100%
  from(与 0% 相同)
  to(与 100% 相同)

@keyframes doubleBounce {
  0%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  }
  50% {
    -webkit-transform: scale(1);
  transform: scale(1);
  }
}

transform

-webkit-transform: scale(0);
transform: scale(0);

值:

  none       定义不进行转换。 
  matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。 
  matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
  translate(x,y)   定义 2D 转换。 
  translate3d(x,y,z) 定义 3D 转换。
  translateX(x)   定义转换,只是用 X 轴的值。 
  translateY(y)   定义转换,只是用 Y 轴的值。 
  translateZ(z)   定义 3D 转换,只是用 Z 轴的值。
  scale(x,y)     定义 2D 缩放转换。 测试
  scale3d(x,y,z)   定义 3D 缩放转换。
  scaleX(x)     通过设置 X 轴的值来定义缩放转换。 
  scaleY(y)     通过设置 Y 轴的值来定义缩放转换。 
  scaleZ(z)     通过设置 Z 轴的值来定义 3D 缩放转换。
  rotate(angle)   定义 2D 旋转,在参数中规定角度。 
  rotate3d(x,y,z,angle) 定义 3D 旋转。
  rotateX(angle)   定义沿着 X 轴的 3D 旋转。 
  rotateY(angle)   定义沿着 Y 轴的 3D 旋转。 
  rotateZ(angle)   定义沿着 Z 轴的 3D 旋转。 
  skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 
  skewX(angle)   定义沿着 X 轴的 2D 倾斜转换。 
  skewY(angle)   定义沿着 Y 轴的 2D 倾斜转换。 
  perspective(n)   为 3D 转换元素定义透视视图。

eg:

 div{
-webkit-animation: scaleCeshi 2s infinite ease-in-out;
animation: scaleCeshi 2s infinite ease-in-out;
} div span{
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
} @-webkit-keyframes scaleCeshi {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
} @keyframes scaleCeshi {
0%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
}
50% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

  

初识动画animation的更多相关文章

  1. Android动画效果之初识Property Animation(属性动画)

    前言: 前面两篇介绍了Android的Tween Animation(补间动画) Android动画效果之Tween Animation(补间动画).Frame Animation(逐帧动画)Andr ...

  2. 动画animation的三个应用(漂浮的白云、旋转的星球、正方体合成)

    × 目录 [1]漂浮的白云 [2]旋转的星球 [3]正方体合成 前面的话 前面介绍过动画animation的详细用法,本文主要介绍动画animation的三个效果 漂浮的白云 [效果演示] [简要介绍 ...

  3. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  4. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  5. Qt-4.6动画Animation快速入门三字决

    Qt-4.6动画Animation快速入门三字决 Qt-4.6新增了Animation Framework(动画框架),让我们能够方便的写一些生动的程序.不必像以前的版本一样,所有的控件都枯燥的呆在伟 ...

  6. css3 动画(animation)-简单入门

    css3之动画(animation) css3中我们可以使用动画,由于取代以前的gif图片,flash动画,以及部分javascript代码(相信有很多同学都用过jquery中的animate方法来做 ...

  7. Android 动画animation 深入分析

    转载请注明出处:http://blog.csdn.net/farmer_cc/article/details/18259117 Android 动画animation 深入分析 前言:本文试图通过分析 ...

  8. View 动画 Animation 运行原理解析

    这次想来梳理一下 View 动画也就是补间动画(ScaleAnimation, AlphaAnimation, TranslationAnimation...)这些动画运行的流程解析.内容并不会去分析 ...

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

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

随机推荐

  1. HTML5 HybridApp开发上手指引

    眼下我们项目是基于AngularJS和ionic框架开发的Hybrid App.支持android phone/pad, iPhone,iPad四个平台版本号.以及微信版. 由于使用的技术有点新,所以 ...

  2. Reflux 使用教程

    Reflux是根据React的flux创建的单向数据流类库.Reflux的单向数据流模式主要由actions和stores组成.例如,当组件list新增item时,会调用actions的某个方法(如a ...

  3. 美化select的jquery插件

    自己写的一个美化select插件,浏览器自带的实在太丑,还不能用css自定义. 插件主要原理是隐藏原生的select控件,支持select上设置change事件. 脚本 /* * iSelect * ...

  4. Ribbon2: 创建动态的Ribbon库

    Sam Radakovitz曾在Excel团队博客中发表过一篇文章,介绍了如何创建动态的Ribbon库,即如何通过RibbonX和VBA放置动态的图形图像到功能区库中,在该文中,作者创建了两个库:一个 ...

  5. 初识nginx+tomcat

    百度百科说: Nginx ("engine x") 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/POP3/SMTP服务器.Nginx是由Igor Sysoev为俄罗斯 ...

  6. ThinkPHP 类似Yii的Gii生成Model的功能。

    ThinkPHP 类似Yii的Gii生成Model的功能.自动生成ThinkPhp 3.1 的基础模型.. #!/usr/bin/env php <?php /** * * THINKPHP 基 ...

  7. AngularJS心得体会

    AngularJS早些时候有过了解,知道这是一个JS的MVC框架,同类型的框架还有Backbone等.这次是由于项目需要,学习了两天的Angular后开始着手改之前的项目代码,这里大概说一下这一周学习 ...

  8. Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment variable to “*****”

    Plugin is too old, please update to a more recent version, or set ANDROID_DAILY_OVERRIDE environment ...

  9. HTML5的结构学习(2) --- 新增的非主体结构元素

    除了上一篇学习到的主体结构元素之外,html5还增加了一些表示逻辑结构和附加信息的非主体结构元素: 1.header 解释:一种具有引导和导航作用的结构元素. 用途:通常用来放置整个页面或者页面内某一 ...

  10. windows----composer、laravel安装

    环境要求:php+apache,并且将php的根目录配置到“环境变量”. 1.安装composer 使用cmd进入想要安装composer的目录执行如下命令,下载composer.phar文件: ph ...