css3 轻松实现动画之Transitions

在软件开发中，web前端开发的动画是我们不可缺少的特效，在css3以前实现动画大多都可靠javascript来实现，其步骤相对于今天的css3来说要复杂的多。尽管有了很多很好框架。得在css3中来实现动画要简单的多。css3中有负责动画的有两个一个是transitions 一个是animations 这个两个可以说是各有不同，今天我先给大家分享transitions 的用法。对于浏览器的支持就不在这里普及了，如果你看不到动画效果，就说明你的浏览器不支持css3

这里看一下效果，数据移动到上面会有变化

transition：[ transition-property ] || [ transition-duration ] || [ transition-timing-function ] || [ transition-delay ]

[ transition-property ]：
检索或设置对象中的参与过渡的属性
[ transition-duration ]：
检索或设置对象过渡的持续时间
[ transition-timing-function ]：
检索或设置对象中过渡的动画类型
[ transition-delay ]：
检索或设置对象延迟过渡的

下面是源码

    1. <!DOCTYPE HTML>
    2. <html>
    3. <body>
    4. <div class="a"></div>
    5. <div class="a"></div>
    6. <div class="a"></div><div class="a"></div><div class="a"></div>
    7. <div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div><div class="a"></div>
    8. <style>
    9. .a{ width:300px; height:30px; background:#0C9;-webkit-transition: width 1s ease,background-color 1s ease }
    10. .a:hover{background-color:#9C0; width:150px; height:30px; -webkit-transition: width 1s ease,background-color 1s ease}
    11. </style>
    12. </body>
    13. </html>
时间： 2024-11-04 02:27:45

css3 轻松实现动画之Transitions的相关文章

css3动画属性(transitions:property duration timing transition-delay)

transitions:property duration timing-function; transitionst他有三个参数:1) property:属性设置,例如background,color等.2) duration:执行时间, 例如1s, 0.5s等.3) timing-function:动画种类, 例如linear 渐变 等.4) transition-delay:延迟时间. 例题(1): 1 p{ background:#000; 2 -webkit-transition:ba

CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能.transition属性的用法如下: transition:property duration timing-function; 其中,property表示对哪个属性平滑过渡,取值可以是“background-color”.“color”.“width

jquery使用CSS3实现文字动画效果插件Textillate.js

Textillate是一款基于jquery的使用CSS3实现文字动画的小巧插件.Textillate.js集成了一些很棒的使用CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字. Textillate 下载        案例演示 使用方法 引入核心文件 <link href="assets/animate.css" rel="stylesheet"> <script src="http:/

八、CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果,下面我们就来介绍下这两种功能. 1.Transitions功能 1.1 Transitions功能的使用方法 CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能,使用方法如下: transition:属性名 过渡时间间隔 过渡方法 延迟时间,第一个属性值表示对哪个属性进行平滑过渡,第二个属性表示在

9款极具创意的HTML5/CSS3进度条动画（免积分下载）

尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detail/yangwei19680827/7352505 今天我们要分享9款极具创意的HTML5/CSS3进度条动画,这些进度条也许可以帮你增强用户交互和提高用户体验,喜欢的朋友就收藏了吧. 1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加

CSS3的自定义动画帧

CSS3新增的动画帧非常绚丽,可以简单实现一些动画效果,目前除IE外各大主流浏览器都支持 本文演示三个:transform: scale3d(x, y, z)-缩放;.transform: translate3d(x, y, z)-位移;.transform:rotateX/Y(?deg)-旋转; 演示地址:http://wjf444128852.github.io/demo02/css3/index.html @keyframes 动画名{} @-处理兼容性-keyframesanimatio

css3 --- 翻页动画 --- javascript --- 3d --- 准备

用css3和javascript做一个翻页动画<知识准备部分> 如有更多疑问请参照:http://www.imooc.com/learn/77 这是用css3的-webkit-transition属性做的渐变颜色动画,下面是三张截图: 怎么样?好看吧,下面是它的代码: -webkit-transition: background-color 2s;-webkit-是用chrome或safari打开的一个前缀,transition时表示渐变的属性,它的值是 渐变属性 和 渐变时间,上面注释的部分

css3 简单界面动画

asdasdasdasda asdasdasdasdacss3 简单界面动画,布布扣,bubuko.com

css3实现3D动画轮播图

这个感觉有点水,只是一个很简单的css3的3D动画,不过对于不会的人来说,应该还是蛮能唬人的吧,哈. 原理很简单,老规矩,都在注释里面,可以直接复制走代码,粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; marg