CSS Animation

 1 div {
 2     /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/
 3     -webkit-animation-name: myfirst; /*规定 @keyframes 动画的名称。*/
 4     -webkit-animation-duration: 5s;  /*规定动画完成一个周期所花费的秒或毫秒。默认是 0。*/
 5     -webkit-animation-timing-function: linear;/*设置动画的速度曲线,默认是 "ease"。*/
 6     -webkit-animation-delay: 2s; /*设置延时,即从元素加载完成之后到动画序列开始执行的这段时间。*/
 7     -webkit-animation-iteration-count: infinite;/*规定动画被播放的次数。默认是 1。*/
 8     -webkit-animation-direction: alternate;/*设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。*/
 9     -webkit-animation-play-state: running;/*规定动画是否正在运行或暂停。默认是 "running"。*/
10     /* Standard syntax */
11     animation-name: myfirst;
12     animation-duration: 5s;
13     animation-timing-function: linear;
14     animation-delay: 2s;
15     animation-iteration-count: infinite;
16     animation-direction: alternate;
17     animation-play-state: running;
18 }

可以缩写为

div {
    -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Chrome, Safari, Opera */
    animation: myfirst 5s linear 2s infinite alternate; /* Standard syntax */
}

补充:

animation-direction
设置动画在每次运行完后是反向运行还是重新回到开始位置重复运行。默认值normal不循环,reverse反向运行,alternate正常运行完后反向运行依次循环,alternate-reverse先反向运行后正常运行依次循环

http://www.w3schools.com/cssref/playit.asp?filename=playcss_animation-direction&preval=normal



animation-timing-function
设置动画速度, 即通过建立加速度曲线,设置动画在关键帧之间是如何变化。可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0);

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0);

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0);

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0);

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0);

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp



animation-fill-mode
指定动画执行前后如何为目标元素应用样式。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-fill-mode




例子中div至少要设置动画的名称和时长,然后在@keyframes中创建动画,绑定到div的选择器(动画名称)

@keyframes至少要创造两帧以上

完整例子:

<!DOCTYPE html>
<html>
<head>
<style>
div {
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation: myfirst 5s;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes myfirst {
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px;}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

旋转:

@-moz-keyframes rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-o-keyframes rotate {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

摇摆:

@-moz-keyframes arm {
  from {
    -moz-transform: rotate(-4deg);
  }
  to {
    -moz-transform: rotate(4deg);
  }
}
@-o-keyframes arm {
  from {
    -o-transform: rotate(-4deg);
  }
  to {
    -o-transform: rotate(4deg);
  }
}
@keyframes arm {
  from {
    transform: rotate(-4deg);
  }
  to {
    transform: rotate(4deg);
  }
}
@-webkit-keyframes arm {
  from {
    -webkit-transform: rotate(-4deg);
  }
  to {
    -webkit-transform: rotate(4deg);
  }
}

css3-transform:

http://www.w3cplus.com/content/css3-transform

CSS Animation

时间: 2024-10-12 17:26:28

CSS Animation的相关文章

css animation关于step

animation-timing-function animation-timing-function 规定动画的速度曲线.速度曲线定义动画从一套 CSS 样式变为另一套所用的时间.在平常的取值中,主要有以下几个: 值 描述 linear 动画从头到尾的速度是相同的. ease 默认.动画以低速开始,然后加快,在结束前变慢. ease-in 动画以低速开始. ease-out 动画以低速结束. ease-in-out 动画以低速开始和结束. cubic-bezier(n,n,n,n) 在 cub

CSS Animation 属性

一.animation是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,如果对flash有一定的了解,那这个属性就会很容易学习. 先展示一下简单的动画效果 __ __O 二.下面就来了解一下animation的具体属性. 1.动画名称 1 /*1.name:动画名称*/ 2 /*-webkit-animation-name: kf_play;*/ 3 /*-moz-animation-name: kf_play;*/ 4 /*-o-animation-name: kf_play;*/ 5

[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it to a class with animation-name, set the duration with animation-duration, and if you want the animation to 'stick' on the end state, add animation-fi

css animation和keyframes

keyframes应用在animation上,animation应用在元素上. <html> <style type="text/css"> .div1 { width:100px;height:100px;border:1px solid #000;position:relative; animation : move 800ms ease-out infinite alternate; } @keyframes move { from {top:0px;}

css Animation初体验(译文)

目前有越来越多的网站都使用animation,无论他们是用GIF,SVG,WebGL,视频背景或者其他形式展示.适当地使用动画会让网站更生动,互动性更好,为用户增加一个额外的反馈和体验层. 在本教程中我会向你介绍CSS动画:随着浏览器支持性的提高已经变得越来越流行了,css动画在做一些事情上有很高的性能.在涵盖了基础知识后,我们将建一个快速的例子:矩形变成圆形的动画. 演示看这里 @keyframes和动画 介绍 css动画的主要组件:@keyframes,创建动画的css规则.把@keyfra

优雅地使用CSS Animation delay

今天写一个css动画时遇到一个mini难题,记录如下: 1.需求: 等待元素A的动画加载完,再加载B元素的动画 2.初始思路: 在B元素的动画属性上加上delay(延迟,使得这个延迟时间 = A元素动画的加载时间) 即:animation : bmove 1s .4s 1; (这里的.4s即delay) b的动画过程代码如下: @keyframes bmove { 0%     { opacity:0px; margin-top:300px } 70%   { opacity:1px;  } 1

CSS Animation初探

动画在交互设计中是一个十分能加分的东西,用以平滑过度,会让用户体验上几个台阶.对于Web开发也是如此,恰当的使用动画可以让网页使用起来更加的用户友好.这里就来探讨一下CSS中一些动画的实现方式,初识前端,不足之处敬请指正. 点击阅读全文

CSS animation online生成工具

利用HTML5.css的一些动画功能,可以设计出非常炫酷的动画,但是由于并不是所有的浏览器都支持,所以可能需要prefix,这个过程是比较烦的.一个比较好用的线上工具: http://matthewlein.com/ceaser/

CSS animation动画loading

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>logging</title> <style> @keyframes beat{ 70%{ transform: scale(1,1); } 100%{ transform: scale(1.3,1.3); } } body{ margin: 0