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. JVM内存模型

    原文地址:http://www.cnblogs.com/dingyingsi/p/3760447.html 1.程序计数器 程序计数器(Program Counter Register)是一块较小的内 ...

  2. android edittext属性说明

    将EditText内容转换为字符串: EditText.getText().toString() <EditText android:id="@+id/edt_month" ...

  3. mysql sum 和 count 函数 合并使用

    SELECT sum(start) as total, count(start) as rows FROM table where....

  4. 4412开发板学习笔记-NFS服务器的搭建

    转自iTOP-4412讨论群: http://www.topeetboard.com 先来介绍一下NFS: NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件 ...

  5. [WPF系列]Adorner应用-自定义控件ImageHotSpot

    引言 项目中有时需要在图片上标注热区,在HTML中有<area>标签,但在WPF中目前还没现成的控件来实现这这一功能.至于图片热区功能有道词典的[图解词典]是个不错的例子,如图1: 图 1 ...

  6. 理解Docker（2）：Docker 镜像

    本系列文章将介绍Docker的有关知识: (1)Docker 安装及基本用法 (2)Docker 镜像 (3)Docker 容器的隔离性 - 使用 Linux namespace 隔离容器的运行环境 ...

  7. Java实现数组排序

    package com.souvc.hibernate.exp; public class MySort { /** * 方法名:main</br> * 详述:Java实现数组排序 < ...

  8. AutoMapper用法

    可在每层这样写一个类,整合每个实体类的映射 public class AutoMapperHelper { public static void Register() { Mapper.Initial ...

  9. jquery easyui 1.4.1 验证时tooltip 的位置调整

    现象是在表单中如果显示两列控件,右边的控件是combo,combobox 等右边有按钮的,宽度为100%时,验证不通过的tooltip 显示位置不准确如下图所示 打开 jquery.easyui-1. ...

  10. 20145233 GDB调试汇编分析

    GDB调试汇编分析 代码 #include<stdio.h> short addend1 = 1; static int addend2 = 2; const static long ad ...