html5--6-52 动画效果-过渡

实例

 @charset="UTF-8";

 div{

     width: 300px;

     height: 150px;

     margin: 30px;

     font-size: 28px;

 }

 /*因为有了hover效果，有了变化（瞬间），所以可以产生过度动画*/

 #div1{

     background: red;

 /*    多少个属性，现在是颜色和宽都可以变化，这里也可以指定width*/

     transition-property: all;

 /*    持续时间*/

     transition-duration: 1s;

 /*    动画先快后慢这些东西*/

     transition-timing-function: ease;

 /*    动画开始的延迟时间*/

     transition-delay:1s;

 }

 #div1:hover{

     background: green;

     width: 150px;

 }

 #div2{

     background: orange;

     transition-property: width;

     transition-duration: 1s;

     transition-timing-function: cubic-bezier(0.2,0.4,0.5,1);

     transition-delay:1s;

 }

 #div2:hover{

     background: green;

     width: 150px;

 }

 #div3{

     background: blue;

     transition: all 2s ease-in-out 0s;

 }

 #div3:hover{

     background: green;

     width: 150px;

 }

 #div4{

     background: rgba(120,60,30,0.8);

     transition: width 1s ease ,

                 background 2s linear;

 }

 #div4:hover{

     background: green;

     width: 150px;

 }

 #div5{

     background: rgba(20,60,130,0.8);

     transition: all 1s ease 0.5s;

 }

 #div5:hover{

     background: green;

     width: 150px;

     transform: rotate(360deg);

 }
 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="utf-8">

     <title>6-52课堂演示</title>

     <link rel="stylesheet" type="text/css" href="style.css">

 </head>

 <body>

       <div id="div1">过渡动画1</div>

       <div id="div2">过渡动画2</div>

       <div id="div3">过渡动画3</div>

       <div id="div4">过渡动画4</div>

       <div id="div5">过渡动画5</div>

 </body>

 </html>

学习要点

  • 掌握过渡动画的实现和应用

过渡动画：

  1. 通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
  2. CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：把效果添加到哪个 CSS 属性上/规定效果的时长

过渡动画的属性：

    1. transition 简写属性，用于在一个属性中设置四个过渡属性。
    1. transition-property 规定应用过渡的 CSS 属性的名称。

      • none 没有属性会获得过渡效果。
      • all 所有属性都将获得过渡效果。
      • 属性名称
    1. transition-duration 定义过渡效果花费的时间。默认是 0。单位是秒或毫秒
    1. transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。

      • linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
      • ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
      • ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
      • ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
      • ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
      • cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
  1. transition-delay 规定过渡效果何时开始。默认是 0。

html5--6-52 动画效果-过渡的更多相关文章

  1. HTML5 动画效果的多种实现方式

    HTML5 动画效果的多种实现方式 1.  CSS3 transform + transition https://www.w3.org/TR/css-transforms-1/ https://ww ...

  2. Vue过渡和动画效果展示（案例、GIF动图演示、附源码）

    前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...

  3. HTML5 Maker – 在线轻松制作 HTML5 动画效果

    HTML5 Maker 是一个在线动画制作工具,帮助你使用 HTML,CSS 和 JavaScript 创建动态,互动的内容.它非常容易使用,同时可以帮你实现非常好的效果.它可以制作跨浏览器的动画内容 ...

  4. HTML5夜空烟花绽放动画效果

    模板描述:HTML5夜空烟花绽放动画效果基于HTML5 canvas制作,模拟夜空烟花绽放动画效果,烟花会在夜空打出贺词,有新年快乐.合家幸福.万事如意.心想事成.财源广进等,文字可以自定义,做成各种 ...

  5. HTML5+javascript实现图片加载进度动画效果

    在网上找资料的时候,看到网上有图片加载进度的效果,手痒就自己也写了一个. 图片加载完后,隐藏loading效果. 想看加载效果,请ctrel+F5强制刷新或者清理缓存. 效果预览:   0%   // ...

  6. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  7. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

  8. HTML5 3D动画效果

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  9. html5+css3第一屏滚屏动画效果

    详细内容请点击 在线预览立即下载 html5+css3第一屏滚屏动画效果. 转载自:http://tympanus.net/codrops/2014/05/22/inspiration-for-art ...

随机推荐

  1. MYSQL 中GROUP BY

    group by 用法解析 group by语法可以根据给定数据列的每个成员对查询结果进行分组统计,最终得到一个分组汇总表. SELECT子句中的列名必须为分组列或列函数.列函数对于GROUP BY子 ...

  2. shell的函数的简单入门

    shell的函数的简单入门 语法: function funcname(){} 示例: #!/bin/bash #定义将参数转化为大写的函数 function strToUpper(){ | tr ' ...

  3. T2038 香甜的黄油 codevs

    http://codevs.cn/problem/2038/ 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond   题目描述 Description 农夫John ...

  4. Sql server 各版本下载链接

    Sql Server 2008 R2 链接: https://pan.baidu.com/s/11WPcrUL64QT0zT0_9VTb8Q 提取码: 665l 密钥:JD8Y6-MQG69-P9M8 ...

  5. Java开发笔记（一百零一）通过加解锁避免资源冲突

    前面介绍了如何通过线程同步来避免多线程并发的资源冲突问题,然而添加synchronized的方式只在简单场合够用,在一些高级场合就暴露出它的局限性,包括但不限于下列几点:1.synchronized必 ...

  6. Spring 详解（一）------- AOP前序

    目录 1. AOP 简介 2. 示例需求 3. 解决方法一:使用静态代理 4. 解决方法二:使用动态代理 1. AOP 简介 ​ AOP(Aspect Oriented Programming),通常 ...

  7. 统计显著性（Statistical significance）

    显著性,又称统计显著性(Statistical significance), 是指零假设为真的情况下拒绝零假设所要承担的风险水平,又叫概率水平,或者显著水平. [1] 显著性的含义是指两个群体的态度之 ...

  8. Solidedge如何修改特征的参数

    我已经长出了60MM,现在发现不对,要改成50MM.右击这个特征,点击编辑定义   直接左键单击尺寸,修改数据,按回车,鼠标右键,即可.    

  9. 一个TAB的jquery简单写法2

    <style> .honver{ color:red;} </style><script src="jquery-1.9.0.min.js">& ...

  10. Java小日历

    自己写的一个小小日历.执行程序是柯自己主动定位到当前年月日,当点击下个月button是会定位到下个月的这一天,就是说天数不会变.当在一个月中点击某一天时,以下的时间也会随时变化. import jav ...