css3 动画效果 总结 不断完善~~
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 动画效果 总结 不断完善~~的更多相关文章
- Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
- CSS3 动画效果带来的bug
css3 动画效果比如transition:all 2s linear;这种用来计算及时的物体坐标的话会带来一定的问题 比如把一个DIV从A点移动到B点.JS为DIV.style.left=B; 但是 ...
- animate.css 一些常用的CSS3动画效果
大家已经开始在项目中使用一些CSS3动画效果了吧,这让网站在高端浏览器上看起来很上流.animate.css是一个老外做的各种CSS3动画的合集,比较全,也很炫,大家可以参考学习一下. 项目主页:ht ...
- CSS Animatie是一款在线制作CSS3动画的工具，可以在线直接制作CSS3动画效果，生成代码
CSS Animatie是一款在线制作CSS3动画的工具,可以在线直接制作CSS3动画效果,生成代码 CSS Animatie 彩蛋爆料直击现场 CSS Animatie是一款在线制作CSS3动画的工 ...
- 鼠标悬停css3动画效果
下载Demo 效果预览 html: <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 第八十三节，CSS3动画效果
CSS3动画效果 学习要点: 1.动画简介 2.属性详解 3.简写和版本 本章主要探讨HTML5中CSS3的动画效果,可以通过类 Flash那样的关键帧模式控制运行. 一．动画简介 CSS3提 ...
- CSS3动画效果——js调用css动画属性并回调处理详解
http://www.jb51.net/css/258407.html 这篇文章主要详细介绍了CSS3动画效果回调处理,需要的朋友可以参考下 我们在做js动画的时候,很多时候都需要做回调处理,如在一个 ...
- 35个让人惊讶的CSS3动画效果
1. Pure CSS Coke Can 2. Colorful Clock 3. jQuery DJ Hero 4. Animated Pricing Column 5. Slick jQuery ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
随机推荐
- Ubuntu搭建Ruby On Rail环境
受不了Ruby在Windows上的执行等待,转战至ubuntu linux下使用,为方便不同版本ruby的使用,采用了rvm安装Ruby on rails环境. 安装rvm //获取认证 gpg -- ...
- HADOOP HA切换后出现ＭＳＳＩＮＧ ＢＬＯＣＫ
HDFS HA切换后missing block问题分析 今天因为调整一个NN的参数,所以切换一个ACTIVE的NN,发生了MISSING BLOCK. 怀疑可能是EDITLOG没有同步完成,可能是误报 ...
- 【小白的CFD之旅】05 补充基础
黄师姐是一个很干脆果敢的人,从她的日常装扮就能显露出来.卡帕运动装,白色运动鞋,马尾辫,这是小白对黄师姐的第一印象.“明天早上九点钟来实验室,我给你安排这阵子的任务.”黄师姐对小白说.说话语气和老蓝一 ...
- 一张图看懂ANSYS17.0 流体 新功能与改进
一张图看懂ANSYS17.0 流体 新功能与改进 提交 我的留言 加载中 已留言 一张图看懂ANSYS17.0 流体 新功能与改进 原创2016-02-03ANSYS模拟在线模拟在线 模拟在线 ...
- 数据结构(Java描述)之线性表
基础概念 数据结构:是相互之间存在一种或多种关系的数据元素的集合. 逻辑结构和物理结构 关于数据结构,我们可以从逻辑结构和物理结构这两个维度去描述 逻辑结构是数据对象中数据元素之间的关系,是从逻辑意义 ...
- Tomcat7服务器删除后重新安装失败问题
学习JSP时,需要修改conf下的配置文件,确发现无论如何修改权限都无法保存,所以决定卸载重装到D盘,卸载时又弹出一个对话框,具体内容没看,但是就是卸载不了,所以打算手动删除. 删除后,重装时安装失败 ...
- Spring源码分析——资源访问利器Resource之接口和抽象类分析
从今天开始,一步步走上源码分析的路.刚开始肯定要从简单着手.我们先从Java发展史上最强大的框架——Spring...旗下的资源抽象接口Resource开始吧. 我看了好多分析Spring源码的,每每 ...
- jquery更改输入框type为密码框password
很蛋疼的一个问题: <input type="text" id="e1" value="123" /> 用juqery将文本框变 ...
- tensorflow学习笔记三：实例数据下载与读取
一.mnist数据 深度学习的入门实例,一般就是mnist手写数字分类识别,因此我们应该先下载这个数据集. tensorflow提供一个input_data.py文件,专门用于下载mnist数据,我们 ...
- Moto C118 基于 Osmocom-BB 和 OpenBTS 搭建小型GSM短信基站
此文章PDF文档下载地址:点击下载 0x00 写在前面 大家应该都听说过摩托罗拉C118配合Osmocom-BB实现GSM网络下的短信拦截功能吧,在14年左右新出了一种玩法就是Osmocom-BB的s ...