In sequence js,the javascript make load css definitation and make animation.

1.Start state

  1. #sequence .slide-content {
  2. z-index:2;
  3. left:100%;
  4. font-size:100px;
  5. opacity: 1;
  6. color: #000;
  7. width:100%;
  8. }

2.Medium state(constant)

  1. /*Medium &constant state*/
  2. #sequence .animate-in .slide-content {
  3. z-index:2;
  4. width:100%;
  5. left:0%;
  6. opacity: 1;
  7. color:#fff;
  8. -webkit-transition-duration: 1s;
  9. -moz-transition-duration: 1s;
  10. -ms-transition-duration: 1s;
  11. -o-transition-duration: 1s;
  12. transition-duration: 1s;
  13. }

3.Final and exit state

  1. /*end state */
  2. #sequence .animate-out .slide-content {
  3. z-index:1;
  4. color: white;
  5. left:-100%;
  6. opacity: 1;
  7. width:100%;
  8. -webkit-transition-duration: 1s;
  9. -moz-transition-duration: 1s;
  10. -ms-transition-duration: 1s;
  11. -o-transition-duration: 1s;
  12. transition-duration: 1s;
  13. }

Result:

Html animation by css(Sequence Js Tutorial)的更多相关文章

  1. CSS vs. JS Animation: 哪个更快

    CSS vs. JS Animation: 哪个更快? CSS vs. JS Animation: 哪个更快? 基于JavaScript的动画竟然已经默默地比CSS的transition动画快了?而且 ...

  2. 如何判断一个DOM元素正在动画,一个CSS“阻塞”JS的例子

    一般情况下CSS不会直接影响JS的程序逻辑,但是以CSS实现动画的话,这个便不太确定了,这个故事发生在与UED迁移全局样式的过程. 曾经我有一段实现弹出层隐藏动画的代码是这个样子的: if (this ...

  3. html、css、js的命名规范

    最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要 ...

  4. JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能

    摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...

  5. 使用styled-components实现CSS in JS

    前面的话 使用jsx语法可以实现HTML in JS,使用svgr可以实现svg in JS,使用styled-components可以实现CSS in JS.这样,使用react开发,就变成了使用J ...

  6. React & CSS Modules & CSS in JS

    React & CSS Modules & CSS in JS https://codesandbox.io/s/css-modules-name-mangling-ck1eo CSS ...

  7. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  8. grunt自定义任务——合并压缩css和js

    npm文档:www.npmjs.com grunt基础教程:http://www.gruntjs.net/docs/getting-started/ http://www.w3cplus.com/to ...

  9. 来,一起让我们越来越懒,面向CSS、JS未来编程。(9.28已更新)

    2016.10.29更新 本文存在大量的错误,仅供参考. 不知不觉在前端领域马上一个年头就要过去了,然而再看看自己的代码,果然够烂,那么为什么代码一直没有用面向对象的思维去写CSS呢?首先有两点:一点 ...

随机推荐

  1. Spring Cloud Netflix Eureka client源码分析

    1.client端 EurekaClient提供三个功能: EurekaClient API contracts are:* - provide the ability to get Instance ...

  2. Android 通过OnScrollListener来监听RecyclerView的位置

    最近做一个漫画app,在阅读漫画界面需要通过获取recyclerView的位置来实时更新界面上的图片进度(比如1/9), 查阅资料得知了可以通过LayoutManager来获取recyclerView ...

  3. 什么是老板思维,什么是员工思维,深有体会,最近被N个行业洗脑……

    什么是老板思维,什么是员工思维,深有体会,最近被N个行业洗脑……

  4. Spring模块作用

    0.模块整理 Spring模块整理(http://www.kuqin.com/shuoit/20150805/347434.html) 模块名 作用 资料 aop  spring的面向切面编程,提供A ...

  5. django第三方库

    1. django_celery_beat 作用:网页端配置定时任务 注意:1,需要迁移表格 2.需要注册app python3 manage.py makemigrations python3 ma ...

  6. python 时间库的用法 时区的转化

    1. 月份的加减 https://blog.csdn.net/qq_18863573/article/details/79444094 第三方模块:python-dateutil import dat ...

  7. VitrualBox虚拟机设置网络桥接方式与windows互相ping通

    一.VitrualBox 选择桥接模式 由于公司服务器对MASK地址访问外网有严格的限制,所以虚拟机里边的HWaddr mask地址没有加入公司的服务器的路由表里边,所以访问不了外网,而网络转换地址( ...

  8. CSUOJ 1554 SG Value

    1554: SG Value Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 140  Solved: 35 Description The SG val ...

  9. Oracle APEX 4.2公布RESTful Webservice

    Purpose This tutorial covers creating a RESTful Web Service and accessing the Web Service through an ...

  10. activity-启动动画的设定(下面弹出出现,弹入下面消失)

    1.今天为了把一个activity以dialog的形式显示,而且实现从开始的时候从底部往上弹出,结束的时候,从上往下消失,做了如下的工作. 1)如果把一个activity以dialog的形式显示? 这 ...