CSS3动画相关的属性：transform,transition,animation.

变形Transform

语法：

transform: rotate | scale | skew | translate |matrix;

rotate:旋转，通过指定一个角度对原元素进行2D旋转，正值表示顺时针旋转，负值表示逆时针。默认原点是其中心位置，可以设置transform-origin.

scale:缩放，通过指定X和Y方向上的缩放倍数对原元素进行2D缩放。

skew:扭曲，通过指定X和Y方向上的斜切角度，对原元素进行斜切变换。

translate:移动，通过指定X和Y方向的移动长度对元素进行移动，正值是向右下移动的。

matrix:矩阵变换

例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3</title>

    <style  type="text/css">

        div{

            width:100px;

            height:100px;

            background:#3385ff;

            margin: 60px;

        }

        #rotate{

            transform:rotate(30deg);

        }

        #scale{

           transform:scale(2,1.5);

        }

        #skew{

           transform:skew(30deg,10deg);

        }

        #translate{

           transform:translate(50%,80%);

        }

    </style>

</head>

<body>

    <div id="rotate">Rotate</div>

    <div id="scale">Scale</div>

    <div id="skew">Skew</div>

    <div id="translate">Translate</div>

</body>

</html>

图：

过渡Transition

transition主要包含四个属性值：执行过渡的属性：transition-property,变换延续的时间：transition-duration,在延续时间段，变换的速率变化transition-timing-function,变换延迟时间transition-delay。

例子：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>CSS3</title>

    <style  type="text/css">

        div{

            width:100px;

            height:100px;

            background:#3385ff;

            margin: 60px;

        }

        #transition{

            transition:width 2s,height 2s;

        }

        div:hover{

            width:200px;

            height:200px;

            transform:rotate(180deg);

        }

</style>

</head>

<body>

    <div id="transition">Transition</div>

</body>

</html>

图1

图2（鼠标放上去）

动画Animation

animation类似transition，不同的是animation可以定义每个关键帧的效果，可以实现更为复杂的动画。

常用属性：

@keyframe:关键帧动画。

animation-name:定义@keyframes的动画名称。

animation-duration:定义动画一个周期的秒或毫秒数。

animation-timing-function:定义动画的速度变化。

animation-delay:定义动画何时开始。

animation-iteration-count:定义动画被播放的次数，可定义为循环播放。

animation-direction:定义动画是否在下一个周期循环播放。

例子

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

@-webkit-keyframes move {

    0% {

        padding: 0;

    }

    50% {

        padding: 0 20px;

        background-color:rgba(190, 206, 235, 0.2);

    }

    100% {

        padding: 0 100px;

        background-color:rgba(190, 206, 235, 0.9);

    }

}

.anim_box:hover {

    -webkit-animation-name: move;

    -webkit-animation-duration: 1.5s;

    -webkit-animation-iteration-count: 4;

    -webkit-animation-direction: alternate;

    -webkit-animation-timing-function: ease-in-out;

}

</style>

</head>

<body>

<div class="anim_box">Animation</div>

</body>

</html>

可以用animation做简单的幻灯片效果，把背景色换成要轮播的图片就可以了

<!DOCTYPE html>

<html>

<head>

<style type="text/css">

@-webkit-keyframes loop {

    0% {

        background:blue;

    }

    25% {

        background:pink;

    }

    50% {

        background:yellow;

    }

    75% {

        background:purple;

    }

    100% {

        background:red;

    }

}

.anim {

    width:100px;

    height:100px;

    -webkit-animation-name: loop;

    -webkit-animation-duration: 10s;

    -webkit-animation-iteration-count: infinite;

    -webkit-animation-timing-function: linear;

}

</style>

</head>

<body>

<div class="anim">Animation</div>

</body>

</html>

CSS3之动画相关的更多相关文章

  1. CSS3制作动画的三个属性

    CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation:我们一起学习完了Transform和Transition,让我们对元素实现了一些基本的动画效果,这 ...

  2. css3 操作动画要点

    CSS3 有3种和动画相关的属性:transform, transition, animation. 不同点: 1.  触发条件不同.transition通常和hover等事件配合使用,由事件触发.a ...

  3. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  4. Css3帧动画深入探寻，讲点项目中实际会碰到的问题

    先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...

  5. CSS3 制作魔方 - 相关立体样式

    最好的实践,就是给定一个实践的目标去实践. 目标:利用 CSS3 的一些特性,绘制一个魔方,要可以玩转的那种,即上下左右每一层都可以独立旋转.效果如下: 为了完成此效果,将使用到以下相关概念和样式:坐 ...

  6. CSS3 @keyframes 动画

    CSS3的@keyframes,它可以取代许多网页动画图像,Flash动画,和JAVAScripts. CSS3的动画属性 下面的表格列出了 @keyframes 规则和所有动画属性: 浏览器支持 表 ...

  7. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  8. css3中动画(transition)和过渡(animation)详析

    css3中动画(transition)和过渡(animation)详析

  9. css3 animation动画特效插件的巧用

    这一个是css3  animation动画特效在线演示的网站 https://daneden.github.io/animate.css/ 下载 animate.css文件,文件的代码很多,不过要明白 ...

随机推荐

  1. 最全的Android源码目录结构详解

    Android 2.1|-- Makefile|-- bionic                        (bionic C库)|-- bootable                (启动引 ...

  2. 黄聪：wordpress伪静态的原理

    首先起作用的是配置文件的.htaccess 中的 RewriteEngine OnRewriteBase /RewriteRule ^index\.php$ - [L]RewriteCond %{RE ...

  3. DBA_Oracle Erp R12中文补丁安装升级（案例）

    2014-07-11 Created By BaoXinjian

  4. linux命令（10）使用kill杀死含有指定关键字的进程

    命令:ps -ef|grep keyword|grep -v grep|cut -c 9-15|xargs kill -9 批量杀死包含关键字“keyword”的进程. "ps -ef&qu ...

  5. mongoDB索引使用

    for(var i=0;i<10000;i++){ db.user.insert({name:"user"+i,age:i}) }添加这么多数据 db.user.find({ ...

  6. laravel判断HTTP请求是否ajax

    if(Request->ajax()){ echo "AJAX"; }else{ echo ＇普通请求＇:}

  7. linux free命令（转载）

    来源:http://www.cnblogs.com/peida/archive/2012/12/25/2831814.html free命令可以显示Linux系统中空闲的.已用的物理内存及swap内存 ...

  8. iPhone开发之UIScrollView初步

    来源:http://blog.csdn.net/htttw/article/details/7891396 iPhone开发之UIScrollView初步 今天我们初步介绍以一下iPhone开发中的U ...

  9. jquery中各个事件执行顺序如下：

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  10. 光流算法：Brox光流的OpenCV源码解析

    OpenCV中DeepFlow代码其实是Brox光流,而非真正的DeepFlow光流,在将近一个月的研究.移植及优化过程中,对Brox光流有了较深刻的认识.我对OpenCV中源码进行了详细的分析,并以 ...