JS动画与CSS3动画
Js动画
show / hide
var div = $('#test-show-hide'); div.show('slow'); // 在0.6秒钟内逐渐显示
div.hide(3000); // 在3秒钟内逐渐消失
slideUp / slideDown
div.slideUp(3000); // 在3秒钟内逐渐向上消失
div.slideDown(3000); // 在3秒钟内逐渐向下消失
fadeIn / fadeOut
div.fadeOut('slow'); // 在0.6秒内淡出
div.animate({ //在3秒内过渡到该状态
opacity: 0.25,
width: '256px',
height: '256px'
}, 3000, function () {
console.log('动画已结束');
// 恢复至初始状态:
$(this).css('opacity', '1.0').css('width', '128px').css('height', '128px');
});
CSS3动画
补间动画
transition只能设定初始和结束时刻的两个状态,中间的过程通过自动计算去完成。
transition 有四个子属性：
- transition-property,需要变化的属性：
- transition-duration,在延续时间段，
- transition-timing-function,变换的速率变化
- transition-delay：变换延迟时间。
transition-property，可以指定为all，元素任何可过渡（transition）属性值变化时都将执行过渡（transition）效果。也可以指定为特一变化的属性。
例如可以设置不同的属性，包括旋转、扭曲、缩放、位移、矩阵 、原点 transform-origin、过渡属性 transition-property、过渡所需时间 transition-duration、过渡函数 transition-timing-function、过渡延迟时间 transition-delay
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<section>
<figure class="animation1">
<img src="img/1.jpg" alt="1"/>
<figcaption>
<h1>图片1</h1>
<p>图片介绍</p>
<p>利用动画延迟达到特效</p>
</figcaption>
</figure>
<figure class="animation2">
<img src="img/2.jpg" alt="2"/>
<figcaption>
<h1>图片2</h1>
<p>图片介绍</p>
</figcaption>
<div class="reg"></div>
</figure>
<figure class="animation3">
<img src="img/3.jpg" alt="3"/>
<figcaption>
<h1>图片3</h1>
<p>图片介绍</p>
</figcaption>
<div class="reg"></div>
</figure>
</section>
</body>
</html>
html,body,figure,figcaption,section,h1,div,p{
margin:0;
}
.animation1{
}
figure{
position: relative;
width: 33.33%;
overflow: hidden;
float: left;
height:300px;
}
figure img{
width:100%;
height:100%;
background: #333;
opacity:0.7;
}
figure figcaption{
font-family: "Microsoft YaHei UI";
transition: all 0.5s ease-in-out;
color: #fff;
position: absolute;
top:10%;
left:10%;
width:80%;
transform: translate(-250px,0);
}
figure:hover figcaption{
transform: translate(0,0);
}
figure.animation1:hover img{
opacity:0.8;
}
figure.animation1:hover figcaption p{
transform: translate(0,0);
}
.animation1 figcaption h1{
font-size: 16px;
text-align: center;
width:30%;
background: #333;
opacity:0.3;
}
.animation1 figcaption p{
transition: all 0.4s ease-in-out;
font-size: 12px;
margin-top: 2%;
text-align: center;
width: 30%;
background: #333;
opacity: 0.3;
transform: translate(-250px,0);
}
figure.animation1 figcaption p:nth-of-type(1){
transition-delay: 0.15s;
}
figure.animation1 figcaption p:nth-of-type(2){
transition-delay: 0.3s;
}
figure.animation2 .reg{
border: 2px solid azure;
position: absolute;
width:80%;
height: 80%;
top:10%;
left:10%;
transition: all 0.4s ease-in-out;
transform:rotate(0deg) scale(0,0);
}
figure.animation2:hover .reg{
transform:rotate(360deg) scale(1,1);
}
figure.animation2 figcaption{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
figure.animation2 figcaption h1{
transition: all 0.4s ease-in-out;
transition-delay: 0.1s;
transform: skew(90deg);
}
figure.animation2 figcaption p{
transition: all 0.4s ease-in-out;
transition-delay: 0.3s;
transform: skew(90deg);
}
figure.animation2:hover figcaption h1{
transform: skew(0deg);
}
figure.animation2:hover figcaption p{
transform: skew(0deg);
}
figure.animation3 .reg{
border: 2px solid azure;
position: absolute;
width:80%;
height: 80%;
top:10%;
left:10%;
transition: all 0.4s ease-in-out;
transform:scale(0,0);
}
figure.animation3:hover .reg{
transform:scale(1,1);
}
figure.animation3 figcaption{
position: absolute;
left: 50%;
top: 50%;
text-align: center;
transform: translate(-50%,-50%);
}
figure.animation3 figcaption h1{
transition: all 0.4s ease-in-out;
transition-delay: 0.1s;
transform: scale(0,0);
}
figure.animation3 figcaption p{
transition: all 0.4s ease-in-out;
transition-delay: 0.3s;
transform: scale(0,0);
}
figure.animation3:hover figcaption h1{
transform: scale(1,1);
}
figure.animation3:hover figcaption p{
transform: scale(1,1);
}
JS动画与CSS3动画的更多相关文章
- 使用jquery封装的动画脚本（无动画、css3动画、js动画）
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- js动画和css3动画的区别
JS动画(逐帧动画) 首先,在js动画是逐帧动画,是在时间帧上逐帧绘制帧内容,由于是一帧一帧的话,所以他的可操作性很高,几乎可以完成任何你想要的动画形式.但是由于逐帧动画的帧序列内容不一样,会增加制作 ...
- vue实现动画和css3动画属性
一.vue动画实现原理: 动画的实现,必须通过元素的显示隐藏或销毁创建.v-show v-if vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 ...
- css3 动画 vs js 动画
之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...
- 高性能 CSS3 动画
注:本文出自腾讯AlloyTeam的元彦,文章也可以在github上浏览.请尊重版权,转载请注明来源,多谢-- 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量 ...
- CSS3动画（性能篇）
写在前面 高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂,我们总结为以下几点: 流量.功耗与流畅度. 在PC时代我们更多的是考虑体验上的流畅度,而在Mobile端本身丰富的场景下,需要额 ...
- css3动画animate
CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
- css3动画性能优化--针对移动端卡顿问题
一.使用css,jquery,canvas制作动画 1.Canvas 优点:性能好,强大,支持多数浏览器(除了IE6.IE7.IE8),画出来的图形可以直接保存为 .png 或者 .jpg的图形: 缺 ...
随机推荐
- 如何使用python将二维数组去重呢?
二维数组的去重,能和一维的方法类似吗?import numpyc=np.array(((1,2),(3,4),(5,6),(7,8),(7,8),(3,4),(1,2)))print('二维数组:\n ...
- LeetCode 110.平衡二叉树（C++）
给定一个二叉树,判断它是否是高度平衡的二叉树. 本题中,一棵高度平衡二叉树定义为: 一个二叉树每个节点 的左右两个子树的高度差的绝对值不超过1. 示例 1: 给定二叉树 [3,9,20,null,nu ...
- 01-取消文件与svn服务器的关联
有的时候一个和svn服务器关联的文件,svn的链接已经失效,但是文件还是显示和svn关联的状态. 下面主要是解决怎么取消一个文件和svn服务器的关联. 1 新建一个文本文件 在任意目录下新建一个文本文 ...
- pat06-图4. Saving James Bond - Hard Version (30)
06-图4. Saving James Bond - Hard Version (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作 ...
- HDU 5384——Danganronpa——————【AC自动机】
Danganronpa Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Tot ...
- angularJS ui router 多视图单独刷新问题
场景:视图层级如下 view1 --view11 --view111 需求:view11的一个动作过后,单独刷新view12 解决方式:修改层级设计 view1 --view11 --view111 ...
- Devexpress Xtrareports 创建多栏报表
根据官方回答:多列或多行(取决于当前的多栏设置)呈现数据的报表 这种报表是有用的,例如,当每个明细区都只显示少量数据.并且需要在一列的右侧打印下一个明细区时,这样就能充分利用整个页面的宽度,此外,当创 ...
- 让GIt忽略SSL证书错误的方法
当你通过HTTPS访问Git远程仓库,如果服务器的SSL证书未经过第三方机构签署,那么Git就会报错.这是十分合理的设计,毕竟未知的没有签署过的证书意味着很大安全风险.但是,如果你正好在架设Git服务 ...
- Win7无法将图标(Chrome谷歌浏览器更新后无法锁定也适用)锁定到任务栏解决办法
“将程序锁定到任务栏”是Windows 7中的一个非常有用的功能,它比之前的快速启动栏要来得简洁.但是我用了一段时间之后,发现“锁定到任务栏”这一个选项消失了,对图标点右键找不到这个图标,直接把图标拖 ...
- html常用样式
1.小手:style="cursor: pointer;" 2.滚动条:style="height: 1oopx;overflow: auto;"; 3.文本框 ...