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. Linux IO调度器相关算法介绍(转)

    IO调度器(IO Scheduler)是操作系统用来决定块设备上IO操作提交顺序的方法.存在的目的有两个,一是提高IO吞吐量,二是降低IO响应时间.然而IO吞吐量和IO响应时间往往是矛盾的,为了尽量平 ...

  2. 基于List集合映射

    1. 实体类中使用List集合 public class Grade { private int id; private String name; private List<Student> ...

  3. POJ 2411 Mondriaan'sDream（状压DP）

    题目大意:一个矩阵,只能放1*2的木块,问将这个矩阵完全覆盖的不同放法有多少种. 解析:如果是横着的就定义11,如果竖着的定义为竖着的01,这样按行dp只需要考虑两件事儿,当前行&上一行,是不 ...

  4. java_ _反射

    Java语言的反射机制初步学习 首先看下基本概念: (一)在Java运行时环境中,对于任意一个类,能否知道这个类有哪些属性和方法?对于任意一个对象,能否调用它的任意一个方法?答案是肯定的.这种动态获取 ...

  5. 通过Application传递数据代码

    使用Application传递数据步骤如下:创建新class,取名MyApp,继承android.app.Application父类,并在MyApp中定义需要保存的属性     在整个Android程 ...

  6. JAVA 界面 - 记事本

    代码: import java.awt.*; import javax.swing.*; import java.awt.event.*; public class Jiemian10 extends ...

  7. Mysql命令大全&&指定端口登录

    1.连接Mysql 格式: mysql -h主机地址 -u用户名 -p用户密码 -P端口   若出现access denied for user 'sy-fjj-web'@'localhost' (u ...

  8. mac下安装和卸载软件

    http://snowolf.iteye.com/blog/774312 homebrew主页对brew   https://github.com/mxcl/homebrew/wiki Pre. in ...

  9. jQuery 常见操作实现方式

    一个优秀的 JavaScript 框架,一篇 jQuery 常用方法及函数的文章留存备忘. jQuery 常见操作实现方式 $("标签名") //取html元素 document. ...

  10. linux内核设计与实现--进程管理

    进程就是出于执行期的程序.进程的另一个名字是任务. 执行线程,简称线程(thread),是在进程中活动的对象.每个线程都有一个独立的程序计数器.进程栈和一组进程寄存器.内核调度的对象是线程,而不是进程 ...