文档章节

CSS动画实用技巧

上古遗露
 上古遗露
发布于 2015/12/10 12:03
字数 435
阅读 14
收藏 0
点赞 0
评论 0

一、transition

定义和用法

transition 属性是一个简写属性,用于设置四个过渡属性,在hover前定义:

transition-property

transition-duration

transition-timing-function

transition-delay

默认值:all 0 ease 0

JavaScript语法:object.style.transition="width 2s"

语法:

transition: property duration timing-function delay;
  • transition-property

描述:规定设置过渡效果的 CSS 属性的名称。

JavaScript语法:object.style.transitionProperty="width,height"

语法:transition-property: none|all|property;

属性值:

  1. none 没有属性会获得过渡效果。

  2. all 所有属性都将获得过渡效果。

  3. property 定义应用过渡效果的 CSS 属性名称列表,列表以逗号分隔。

  • transition-duration

描述:规定完成过渡效果需要花费的时间(以秒或毫秒计)。默认值是 0,意味着不会有效果。

JavaScript语法:object.style.transitionDuration="5s"

语法:transition-duration: time;

注释:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

  • transition-timing-function

描述:规定速度效果的速度曲线。

JavaScript语法:object.style.transitionTimingFunction="linear"

语法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值:

  1. linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。

  2. ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。

  3. ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。

  4. ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。

  5. ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

  6. cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

  • transition-delay

描述:定义过渡效果何时开始。默认值0

JavaScript语法:object.style.transitionDelay="2s"

语法:transition-delay: time;

属性值:

time    规定在过渡效果开始之前需要等待的时间,以秒或毫秒计。




© 著作权归作者所有

共有 人打赏支持
上古遗露
粉丝 7
博文 21
码字总数 42929
作品 0
苏州
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1 ⋅ 2012/07/10 ⋅ 12

10几种实用的CSS3鼠标滑过图片动画特效

10几种实用的CSS3鼠标滑过图片动画特效 HTML5资源教程2017-12-053 阅读 css3鼠标动画特效图片 这是一款非常实用的CSS3图片应用特效,当我们将鼠标滑过图片时,图片就会产生10几种不同的动画特...

HTML5资源教程 ⋅ 2017/12/05 ⋅ 0

分享40个实用的jQuery用户界面UI设计技巧及教程

作者:Jane Bernardo 翻译:Terry li - GBin1.com 原文: 40 Useful jQuery Techniques And Tutorials For Great User Interface jQuery在web开发中已经吸引了大量开发人员。使用jQuery能构建......

gbin1 ⋅ 2011/07/19 ⋅ 0

纯CSS3实现的多层嵌套圆环Loading动画

纯CSS3实现的多层嵌套圆环Loading动画 HTML5资源教程2017-12-105 阅读 css3loading动画 之前我们为大家分享过一些炫酷实用的CSS3圆环形Loading加载动画,很多都是纯CSS3实现的。今天我们要分...

HTML5资源教程 ⋅ 2017/12/10 ⋅ 0

程序猿必备的15款web前端动画插件七

  1.超简易的SVG/CSS3 Loading加载动画图标   今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画...

爱码农 ⋅ 01/08 ⋅ 0

你所不知道的 CSS 动画技巧与细节

怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画。 废话少说,直接进入正...

chokcoco ⋅ 2017/08/28 ⋅ 0

如果你在找 CSS 学习资源,那就收藏这篇文章

本文由伯乐在线 -伯小乐 翻译。未经许可,禁止转载! 英文出处:Grace Smith。欢迎加入翻译组。 如果你在寻找一些 CSS 基础和高级的指南或资源,那这篇文章应该有你要的 CSS 初级和高级指南:...

伯乐在线 ⋅ 2014/11/07 ⋅ 0

5个实用的CSS3实例

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。用纯CSS也可以实现各种各样很酷的效果了,甚至...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

分享5个实用而且美观的CSS3实例

对于设计人员和开发人员来说,CSS一直是web设计过程中重要的一部分,随着CSS3的出现以及越来越多的浏览器对它的支持,设计师们有了 更多的选择。 用纯CSS也可以实现各种各样很酷的效果了,甚...

小编辑 ⋅ 2010/06/29 ⋅ 3

纯CSS3下拉菜单导航 多种下拉弹出动画

纯CSS3下拉菜单导航 多种下拉弹出动画 HTML5资源教程2018-01-091 阅读 css3下拉菜单动画 之前我们分享过非常多的jQuery/CSS3下拉菜单插件,有些非常实用,比如这款 HTML5/CSS3水平二级下拉菜...

HTML5资源教程 ⋅ 01/09 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Boot整合模板引擎thymeleaf

项目结构 引入依赖pom.xml <!-- 引入 thymeleaf 模板依赖 --><dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId......

yysue ⋅ 17分钟前 ⋅ 0

ConstraintLayout使用解析

AndroidStudio3.0创建Project默认的布局就是ConstraintLayout。 AndroidStudio3.0前的可以自己修改,使用ConstraintLayout。 为了要使用ConstraintLayout,我们需要在app/build.gradle文件中...

_OUTMAN_ ⋅ 28分钟前 ⋅ 0

OSChina 周三乱弹 —— 这样的女人私生活太混乱了

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @ 胖达panda :你经历过体验到人生的大起大落吗?我一朋友在10秒内体验了,哈哈。@小小编辑 请点一首《almost lover》送给他。 《almost love...

小小编辑 ⋅ 今天 ⋅ 9

自己动手写一个单链表

文章有不当之处,欢迎指正,如果喜欢微信阅读,你也可以关注我的微信公众号:好好学java,获取优质学习资源。 一、概述 单向链表(单链表)是链表的一种,其特点是链表的链接方向是单向的,对...

公众号_好好学java ⋅ 今天 ⋅ 0

Centos7重置Mysql 8.0.1 root 密码

问题产生背景: 安装完 最新版的 mysql8.0.1后忘记了密码,向重置root密码;找了网上好多资料都不尽相同,根据自己的问题总结如下: 第一步:修改配置文件免密码登录mysql vim /etc/my.cnf 1...

豆花饭烧土豆 ⋅ 今天 ⋅ 0

熊掌号收录比例对于网站原创数据排名的影响[图]

从去年下半年开始,我在写博客了,因为我觉得业余写写博客也还是很不错的,但是从2017年下半年开始,百度已经推出了原创保护功能和熊掌号平台,为此,我也提交了不少以前的老数据,而这些历史...

原创小博客 ⋅ 今天 ⋅ 0

LVM讲解、磁盘故障小案例

LVM LVM就是动态卷管理,可以将多个硬盘和硬盘分区做成一个逻辑卷,并把这个逻辑卷作为一个整体来统一管理,动态对分区进行扩缩空间大小,安全快捷方便管理。 1.新建分区,更改类型为8e 即L...

蛋黄Yolks ⋅ 今天 ⋅ 0

Hadoop Yarn调度器的选择和使用

一、引言 Yarn在Hadoop的生态系统中担任了资源管理和任务调度的角色。在讨论其构造器之前先简单了解一下Yarn的架构。 上图是Yarn的基本架构,其中ResourceManager是整个架构的核心组件,它负...

p柯西 ⋅ 今天 ⋅ 0

uWSGI + Django @ Ubuntu

创建 Django App Project 创建后, 可以看到路径下有一个wsgi.py的问题 uWSGI运行 直接命令行运行 利用如下命令, 可直接访问 uwsgi --http :8080 --wsgi-file dj/wsgi.py 配置文件 & 运行 [u...

袁祾 ⋅ 今天 ⋅ 0

JVM堆的理解

在JVM中,我们经常提到的就是堆了,堆确实很重要,其实,除了堆之外,还有几个重要的模块,看下图: 大 多数情况下,我们并不需要关心JVM的底层,但是如果了解它的话,对于我们系统调优是非常...

不羁之后 ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部