1.transition

在CSS3中，可以通过transition为元素从一种样式变换为另外一种样式的过程添加效果。

transition为简写属性，用于在一个属性中设置四个过渡属性，分别是：

transition-property：应用过渡的CSS属性的名称，如width，background-color等；

transition-duration：过渡过程所花的时间，如不指定，默认为0；

transition-timing-function：过渡效果的时间曲线，即动画速度随时间的变化而变化，默认为ease（先慢再变快再以慢速结束）；

transition-delay：规定过渡效果延迟多少开始，默认为0；

eg：

<style>

div{

    width:50px;

    heigth:50px;

    background-color:yellow;

    transition:width 2s;

}

div:hover{

    width:100px;

}

</style>

<div></div>

上面的例子中，当鼠标移到该元素上面时，元素的宽度width会在2s内从50px增加为100px；

另外transition-property的值也可以设定为transform，这样一来就可以实现更多的动画效果

eg：

<style>

div

{

width:100px;

height:100px;

background:yellow;

transition:transform 2s;

}

div:hover

{

transform:translate(30px,40px);

}

</style>

<div></div>

上面的例子中 ，当鼠标移到该元素上面时，元素两秒内向左向下移动30px、40px；

如果需要向多个样式添加过渡效果，应该使用逗号隔开

eg：

div{

    transition:width 2s,transform 3s,height 4s;

}

2.animation

animation  包含六个属性，分别是：

animation-name：规定@keyframes动画的名称；

animation-duration：规定完成一个动画周期所花的时间；

animation-timing-function：规定动画速度的变化曲线，默认为ease；

animation-delay：规定动画延迟开始的时间，默认为0；

animation-iteration-count：规定动画被播放的次数（周期），默认为1，infinite为无限次播放；

animation-direction：规定动画是否在下一周期逆序播放，默认为normal，动画正常播放，设置为alternate时，动画在1，3，5等奇数次时正常播放，在2，4，6等偶数次逆序播放；

除此6个属性外，还有两个不包含在animation简写属性内的。

animation-play-state：规定动画是运行还是暂停的，running表示运行中，paused表示暂停中，一般在JavaScript中使用，如此便可以在播放过程中暂停动画。

animation-fill-mode：规定动画在播放前或播放后，动画效果是否可见。属性值默认为none；设置为forwards时，当动画完成时，保持最后的效果（即保持在最后的关键帧中设置的效果），设置为backwards时，在animation-delay设置的那段时间内，在动画正式开始时，应用在最开始的关键帧中定义的效果

和animation密切相关的，还有上面提到的@keyframes，@keyframes用于创建动画，通过在@keyframes中定义CSS样式，就能创建由当前样式逐渐改为新样式的动画效果。

eg：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #test {

            width: 100px;

            height: 100px;

            background-color: blue;

            animation: myAnimation 3s;

        }

        @keyframes myAnimation {

            from {

                width: 100px;

            }

            to {

                width: 300px;

            }

        }

    </style>

</head>

<body>

    <div id="test"></div>

</body>

</html>

另外，animation不同于transition的地方在于，animation可以定义关键帧，可以使动画在多个状态间变换

eg：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        #test {

            width: 100px;

            height: 100px;

            background-color: blue;

            animation: myAnimation 3s;

        }

        @keyframes myAnimation {

            0% {

                width: 100px;

            }

            30% {

                width: 200px;

            }

            60% {

                width: 250px;

            }

            100% {

                width: 300px;

            }

        }

    </style>

</head>

<body>

    <div id="test"></div>

</body>

</html>

CSS中的动画的更多相关文章

  1. Css中的变形及过渡动画

    在css3的标准中新增加了变形样式,这些样式使得网页中各元素的位置形状的变换变得更加容易.其语法如下: transform:none | <transform-function>+ 其中对 ...

  2. CSS中的一下小技巧2之CSS3动画勾选运用

    使用CSS3实现动画勾选 相信大家在项目中会经常遇到这种需求:勾选框.现在用CSS3来实现一个动画勾选,只需要一个标签即可完成: 这次需要用到CSS中伪类 after,这个小技巧也是很容易忘记的,所以 ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  5. CSS 技巧一则 -- 在 CSS 中使用三角函数绘制曲线图形及展示动画

    最近一直在使用 css-doodle 实现一些 CSS 效果. css-doodle 是一个基于 Web-Component 的库.允许我们快速的创建基于 CSS Grid 布局的页面,以实现各种 C ...

  6. CSS3中的动画效果记录

    今天要记录的是CSS3中的三种属性transform.transition以及animation,这三个属性大大提升了css处理动画的能力. 一.Transform 变形 CSS中transform ...

  7. requestAnimationFrame，Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  8. CSS3中的动画功能（一）

    css3中的动画功能分为transitions功能和animations功能,这两种功能都可以通过改变css属性值来产生动画效果.今天带大家一起来看看css3动画功能中的transitions的用法. ...

  9. CSS 和 JS 动画哪个更快

    基于Javascript的动画暗中同CSS过渡效果一样,甚至更加快,这怎么可能呢?而Adobe和Google持续发布的富媒体移动网站的性能可媲美本地应用,这又怎么可能呢? 本文逐一遍览了基于Javas ...

随机推荐

  1. Jmeter对HTTP请求压力测试、并发测试

    最近公司需要开发一个简单的报名系统,供外网用户提供报名服务,由于我们公司是个初创的微型公司,开发人员都是刚毕业不久,开发经验相当缺乏. 对于服务器性能测试这块的经验更是少得可以忽略.迫使不得不让我们去 ...

  2. 面试准备之三Django知识

    Django请求流程 MTV模式 路由 视图 ORM 模板

  3. mysql主键问题

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_22314145/article/details/80824660 MySQL主键 一. MyS ...

  4. 【Leetcode】【Medium】Repeated DNA Sequences

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  5. 大数据学习---大数据的学习【all】

    大数据介绍 什么是大数据以及有什么特点 大数据:是指无法在一定时间内用常规软件工具对其内容进行抓取.管理和处理的数据集合. 大数据是一种方法论:“一切都被记录,一切都被数字化,从数据中寻找需求,寻找知 ...

  6. Grunt 使用（一）基础搭建

    jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学.不用!废话不多说,直接上干货. 1.安装node.js并检查node -v 和 n ...

  7. 使用MongoDB血泪般的经验教训

    故事背景,天书世界,现在项目已经属于成熟维护期,是时候总结一下当时的想法 第一个问题,为什么使用mongodb? 数据库对于游戏项目本身的要求与传统业务系统差异较大,所以nosql的弱结构性对于我那是 ...

  8. 异常：Neither BindingResult nor plain target object for bean name 'command' available as request attribute

    Neither BindingResult nor plain target object for bean name 'command' available as request attribute ...

  9. Linux学习总结（十四） 文件的打包和压缩

    文件的压缩和打包,在windos下我们很熟悉.rar和.zip文件,这是两种压缩文件,他们支持单个文件和多个文件的压缩.windos下我们不提及打包的概念,虽然多个文件的压缩肯定存在打包过程.打包和压 ...

  10. MVC学习十四：MVC 路由 Route

    一.MVC路由(Route)是什么? MVC路由(Route)可以理解规定用户访问网站方式的配置文件,就例如:我们在访问普通页面时http://xxxx/web/xx.aspx,但在MVC中我们的访问 ...