1.transition 动画过程改变某个css属性的效果 （比如宽高 颜色）

语法

transition:    all  所有元素                                +   执行时间 （如2S ） + 速度效果      +过渡效果开始时间

none 不执行transition动画效果

transition:   transition-property   transition-duration  transition-timing-function transition-delay

值 描述
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

实例 这里transition 做出的动画效果是基于某个元素的css属性 ，同时响应做出效果 要有事件发生 如hover 。下例中改变的是宽度 那hover就要把宽度改变 。

transition主要做的是 声明css的属性 后面跟着动画时间

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

<style type="text/css">

    #a1{

        transition:width 2s;

        -webkit-transiton:width 2s;

        width: 100px;

        height: 100px;

        background: #ccc;

    }

    #a1:hover{

        width: 300px;

    }

</style>

<div  id="a1">transiton改变宽度</div>

</body>

</html>

2.transform 　　

css3 动画效果 总结 不断完善~~的更多相关文章

  1. Bounce.js – 快速创建漂亮的 CSS3 动画效果

    Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...

  2. CSS3 动画效果带来的bug

    css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...

  3. animate.css 一些常用的CSS3动画效果

    大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...

  4. CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码

    CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...

  5. 鼠标悬停css3动画效果

    下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  6. 第八十三节，CSS3动画效果

    CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介     CSS3提 ...

  7. CSS3动画效果——js调用css动画属性并回调处理详解

    http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...

  8. 35个让人惊讶的CSS3动画效果

    1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery  ...

  9. Css3动画效果,彩色文字效果,超简单的loveHeart

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...

随机推荐

  1. 个人Github-欢迎交流探讨

    Github annsshadow

  2. mongoDB的安装（一）

    0.安装环境说明: linux系统:centos6.5 mongoDB版本:mongodb-linux-x86_64-rhel62-3.2.7.tgz 1.下载 mongoDB的下载:https:// ...

  3. FeWeb基础之HTML

    FeWeb基础之HTML 1.HTML简介 HTML是一种超文本标记语言,它的文件扩展名为.html,它的所有部分都是由标记<...>和标记</...>包括起来. 在一个HTM ...

  4. MIT 6.824 : Spring 2015 lab3 训练笔记

    摘要: 源代码参见我的github:https://github.com/YaoZengzeng/MIT-6.824 Lab3: Paxos-based Key/Value Service Intro ...

  5. [转]中国最大的Webshell后门箱子调查，所有公开大马全军覆没

    起因 对这件事情的起因是某天我渗透了一个大站,第二天进webshell时就发现,当前目录出现了新的后门,仔细一查,发现是博彩团伙干的,网站被全局劫持黑帽程序如下代码 set_time_limit(); ...

  6. Let it go.Let it be.Keep it up!

    第三份工作仅仅持续了三个月,今天是last day. 虽然时间很短,但也是经历一场,认识了一些人,知道了一些事. 来去匆匆,难免有一点遗憾,还有一点愧疚. 只能放下,顺其自然,继续努力!

  7. CF733C Epidemic in Monstropolis[模拟 构造 贪心]

    C. Epidemic in Monstropolis time limit per test 1 second memory limit per test 256 megabytes input s ...

  8. Java程序设计之最大公约数和最小公倍数

    题目:输入两个正整数number1和number2,求其最大公约数和最小公倍数. 算法:较大数和较小数取余,较小数除余数,一直到余数为0时,为最大公约数(辗转相除法):最大公倍数numbe1*numb ...

  9. 第15章 LinkedList类(暂无)

    第15章 LinkedList类 LinkedList类是

  10. IIS 设置默认首页静态页，无静态页，走路由

    在Global.asax文件中添加 protected void Application_BeginRequest(Object sender, EventArgs e)         {      ...