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的图形: 缺 ...

随机推荐

(转)企业级NFS网络文件共享服务
企业级NFS网络文件共享服务原文:http://www.cnblogs.com/chensiqiqi/archive/2017/03/10/6530859.html --本教学笔记是本人学习和工作生 ...
案例54-crm练习新增联系人
1 前台页面部分 1 linkman/add.jsp <%@ page language="java" contentType="text/html; charse ...
解决在 WP8/ WP8.1 项目中引用 C++ 组件时出现的 System.TypeLoadException 错误
本文为个人博客备份文章,原文地址: http://validvoid.net/wp-cpp-typeloadexception/ 使用 Visual Studio 2013 update 4 在 WP ...
关于hibernate save方法未能存储数据入库的处理过程
关于hibernate save方法未能存储数据入库的处理过程2018年04月18日 10:57:49 守望dfdfdf 阅读数:230更多个人分类: 工作问题编辑版权声明:本文为博主原创文章,转载 ...
maven课程项目管理利器-maven 2-2第一个maven案例hellomaven
maven 目录结构 pom.xml src -main -java -package -test -java -package -resources
Mysql慢查询 [第二篇]
一.简介 pt-query-digest是用于分析mysql慢查询的一个工具,它可以分析binlog.General log.slowlog,也可以通过SHOWPROCESSLIST或者通过tcpdu ...
dedecms无法下载远程jpeg图片织梦不能提取文章内容中的jpeg图片生成缩略图
文件:/dede/inc/inc_archives_functions.php 代码: preg_match_all("/(src)=[\"|'| ]{0,}([^>]*\. ...
Android OS Startup
OS puts emphases on how to provide interfaces to user's APPs for using hardware device in the conven ...
js获取农历日期【转】
var CalendarData=new Array(100); var madd=new Array(12); var tgString="甲乙丙丁戊己庚辛壬癸"; var dz ...
[topcoder]TheGridDivTwo
http://community.topcoder.com/stat?c=problem_statement&pm=13628&rd=16278 标程是BFS,我用DFS,都可解. 这 ...

JS动画与CSS3动画