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. 黄聪：mysql 存在该记录则更新，不存在则插入记录的sql

    一条mysql教程 存在该记录则更新,不存在则插入记录的sql , ‘yourname') ON DUPLICATE KEY UPDATE auto_name='yourname' ON DUPLIC ...

  2. 一. JVM发展史，运行时数据区域，四大引用

    一.JVM的出现 JVM将字节码解释成不同os下的机器指令,有了jvm,java语言在不同平台上运行时不需要重新编译 虚拟机发展史 (1)Sun Classic classic jvm要么采用纯解释器 ...

  3. SpringMVC4.0.3 @ResponseBody JSON 中文乱码问题

    @RequestMapping(value="listUserJson.html",produces="text/html;charset=UTF-8") @R ...

  4. [Python] UTF-8最好不要带BOM

    一.问题回顾: 问题: 在写一个脚本读入IP分区表文件到list并做比较的时候,发现该成立的语句总是不成立,经调试后发现开头是这样:\xef\xbb\xbf1.0.3.0,故比较不成功. 解决办法:经 ...

  5. 问对于一个给定的n，怎样才能用最少的步骤将它变到1

    如果n为偶数,则将它除以2,如果n为奇数,则将它加1或者减1.问对于一个给定的n,怎样才能用最少的步骤将它变到1.例如:n= 61n-- 60n/2 30n/2 15n++ 16n/2 8n/2 4n ...

  6. ARM7+PROTEUS调试（转）

    网上说ARM7调试产生的.axf文件不能直接放在PROTEUS中调试,方法:将.axf文件复制一份修改后缀名为.elf文件加载即可:hex文件删除倒数(用编辑器)第二行后保存即可加载

  7. Uvision5不能进行软件仿真

    Uvision5不能进行软件仿真不能进行软件仿真,报错: error 65: access violation at 0x40021000 : no 'read' permission(软件仿真出错) ...

  8. 关于this指向思考

    事情起因为<js函数式编程指南>里面看到这段话: 上例DB对象中的save方法作为参数传入到fs的readFile,按道理this指向DB,为啥作者的意思是存在this指针可能会指向其他地 ...

  9. 树莓派，使用opencv调用自带的摄像头

    OpenCV&Pi Cam – Step 1 : Install It’s quite easy to install your new Pi Camera. Installation pro ...

  10. 去掉 input type="number" 右边图标

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...