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. 黄聪：主机宝IIS版ISAPIRewrite伪静态软件操作演示

    下载ISAPIRewrite伪静态破解文件 链接: http://pan.baidu.com/s/1dDEOLl3 密码: yx15 解压到主机宝ISAPIRewrite安装目录即可.如果提示有文件正 ...

  2. Redis几个认识误区(转)

    此文的作者是新浪微博平台架构师杨卫华(timyang)大师,如果关注了新浪一些牛人微博的同学应该知道,timyang前段时间正在对Redis进行一些研究和测试,也分享出了不少成果.下面一篇文章相信是t ...

  3. PLSQL_性能优化系列02_Oracle Join关联

    2014-09-25 Created By BaoXinjian

  4. CF 369C . Valera and Elections tree dfs 好题

    C. Valera and Elections   The city Valera lives in is going to hold elections to the city Parliament ...

  5. python3-cookbook

    http://python3-cookbook.readthedocs.io/zh_CN/latest/index.html 一般的类找方法,通过MRO找到第一个就停了对吧,可以描述器好像会顺着MRO ...

  6. 配置cwrsync实现windows2008和centos7文件定时同步

    一.准备 二.安装 1.安装cwRsyncServer_4.0.5_Installer.exe 安装过程中提示创建用于windows服务的windows用户名,需要注意的是密码一定要它自己生成的密码的 ...

  7. 转-安卓中实现两端对齐，中间fill_parent的方法

    安卓中实现两端对齐,中间fill_parent的方法 Java代码:   <?xml version="1.0″ encoding="utf-8″?> <Line ...

  8. JAVA 理解封装的概念，private私有的，public公有的

    封装就是把不想或者不该告诉别人的东西隐藏起来,把可以告诉别人的公开. 做法:修改属性的访问权限来限制对属性的访问,并为每一个属性创建一对取值和赋值的方法,用于对这些属性的访问 通过封装,可以在给属性赋 ...

  9. 使用thinkphp连接sqlserver数据库时提示“系统不支持:sqlsrv”

    习惯了使用php跟mysql组合,现在接到项目需要调用客户线下的系统软件的数据,具了解,这个软件的数据库是用sqlserver数据库也就是常说的mssql数据库了. 那么我现在需要用PHP连接sqls ...

  10. Maven内置隐式变量(转)

    Maven提供了三个隐式的变量可以用来访问环境变量,POM信息,和Maven Settings env env变量,暴露了你操作系统或者shell的环境变量.便 如在Maven POM中一个对${en ...