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. (WPF, MVVM) Event 处理

    WPF的有些UI元素有Command属性可以直接实现绑定,如Button 但是很多Event的触发如何绑定到ViewModel中的Command呢? 答案就是使用EventTrigger可以实现. 继 ...

  2. [复变函数]第15堂课 4.3 解析函数的 Taylor 展式

    1.  Taylor 定理: 设 $f(z)$ 在 $K:|z-a|<R$ 内解析, 则 $$\bee\label{15:taylor} f(z)=\sum_{n=0}^\infty c_n(z ...

  3. java浮点型比较大小

    ======1   java浮点型比较大小 Float.parseFloat(String)和Float.valueOf(String).floatValue()的区别 Float.parseFloa ...

  4. mapreduce任务中Shuffle和排序的过程

    mapreduce任务中Shuffle和排序的过程 流程分析: Map端: 1．每个输入分片会让一个map任务来处理,默认情况下,以HDFS的一个块的大小(默认为64M)为一个分片,当然我们也可以设置 ...

  5. unset是不能清除保存在本地电脑上的cookie的，用于session就可以(弄了半天原来是这样)

    unset($_COOKIE["historyWord[$wordId]"]); 这样是不行的,unset只是将变量在脚本运行时注销,但是cookie是写在客户端的,下一次还是可以 ...

  6. ui与ux的区别

  7. 检测是否安装有sim卡

    ios7测试ok [CTSIMSupportGetSIMStatus() isEqualToString:kCTSIMSupportSIMStatusNotInserted]可以判断是否插入了sim卡 ...

  8. 聚合查询中的Group by

    2005版本以上的sql server 查询中如果既包含聚合函数列(诸如sum ,count,avg,max等)又存在一般列的情况,则查询字符串结尾必须包含Group By [某一般列].  其实微软 ...

  9. Ubuntu 13.10 安装 ia32-lib

    Ubuntu 13.10下面不参直接安装ia32-libs,直接安装的时候会提示下面的信息: output$ sudo apt-get install ia32-libs Reading packag ...

  10. 什么是bower

    Bower是一个客户端技术的软件包管理器,它可用于搜索.安装和卸载如JavaScript.HTML.CSS之类的网络资源.其他一些建立在Bower基础之上的开发工具,如YeoMan和Grunt,这个会 ...