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 ...
随机推荐
- chm文件突然乱码了
今天打开一个chm文件的帮组文档时,文档时乱码,以前可不是的哦.不知道自己干什么操作了.上网找了下解决办法. 打开cmd 输入regedit 进入注册表:找到: HKEY_CURRENT_USER\S ...
- Win10 通过升级安装完成后出现了中文字体忽大忽小的问题解决。
解决方法: 下载Win10的中文语言包.
- 报表移动端app如何实现页面自适应？
1. 描述 PC上制作好的报表,在手机端查看的时候,报表软件默认的自适应效果不尽人如意.例如,报表比较大,到手机上被缩的非常小,字都看不清等等.为此FineReport增加了选项可以手动控制报表在移动 ...
- Linux Kernel代码艺术——系统调用宏定义
我们习惯在SI(Source Insight)中阅读Linux内核,SI会建立符号表数据库,能非常方便地跳转到变量.宏.函数等的定义处.但在处理系统调用的函数时,却会遇到一些麻烦:我们知道系统调用函数 ...
- DFA 最小化
NDFA.εNDFA 确定化的细节这里就不总结了,这里说一说DFA最小化的算法. 关于DFA最小化,
- jquery的css详解（二）
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- 通过xshell远程连接ubuntu
ubuntu开启sshd服务SSH分客户端openssh-client和openssh-server如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果 ...
- [web建站] 极客WEB大前端专家级开发工程师培训视频教程
极客WEB大前端专家级开发工程师培训视频教程 教程下载地址: http://www.fu83.cn/thread-355-1-1.html 课程目录:1.走进前端工程师的世界HTML51.HTML5 ...
- jquery.lazyload 实现图片延迟加载jquery插件
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验.减少了页面加载的时间了,也减轻了服务器的压力,就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图 ...
- Apache Shiro系列二，概述 —— 基本概念
做任何事情,首先要双方就一些概念的理解达成一致,这样大家就有共同语言,后续的沟通效率会高一些. #,Authentication,认证,也就是验证用户的身份,就是确定你是不是你,比如通过用户名.密码的 ...