Transition属性:

属性 描述 CSS
transition 简写属性,用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。默认值all。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 ease。 3
transition-delay 规定过渡效果何时开始。默认是 0 3

额外提一下两个属性:

颜色: color background-color border-color outline-color
位置: backround-position left right top bottom
长度:
[1]max-height min-height max-width min-width height width
[2]border-width margin padding outline-width outline-offset
[3]font-size line-height text-indent vertical-align
[4]border-spacing letter-spacing word-spacing
数字: opacity visibility z-index font-weight zoom
组合: text-shadow transform box-shadow clip
其他: gradient
  • transition-timing-function

    三阶贝塞尔曲线函数, 这里只要两个控制点的值。

    至于什么是贝塞尔曲线,可以看看贝塞尔曲线扫盲

    内置了几个简单的:

    1、ease:逐渐变慢, 贝塞尔曲线(0.25, 0.1, 0.25, 1.0)

    2、linear:匀速,linear 贝塞尔曲线(0.0, 0.0, 1.0, 1.0)

    3、ease-in:加速,ease-in 贝塞尔曲线(0.42, 0, 1.0, 1.0)

    4、ease-out:减速,ease-out贝塞尔曲线(0, 0, 0.58, 1.0)

    5、ease-in-out:加速然后减,ease-in-out 贝塞尔曲线(0.42, 0, 0.58, 1.0)

    更多的可以在这里获得在线贝塞尔

    这里的取值还有一种steps函数,可以参考深入理解CSS过渡transition


多值:多种属性同时变化的时候

依旧是两个总写法。 注意transition-property和其他属性数量不一致的情况。

/* 方法一*/
.demo{
transition-property: width, height;
transition-delay: 500ms;
transition-timing-function: linear;
transition-duration: 2000ms;
}
/* 方法二*/
.demo{
transition: width 2000ms linear 500ms, height 2000ms linear 500ms
}

触发方式

  • 伪类触发

    :hover、:focus、:active等
  • 媒体查询触发

    @media
  • javascript触发

Transition事件

const transition = document.querySelector('.transition');

transition.addEventListener('transitioncancel', () => {
console.log('Transition canceled');
});

Transition事件的触发次数是非复合的过渡属性的个数, 比如width, height同时变换,那么就是两次。

还比较有趣的事, 比如hover到某元素的时候,开始变换,没变换结束,你就离开。

变换效果会倒着来。下面的demo,就会看到。

简单的Demo

内置贝塞尔函数运动效果

效果有:

进度条

思路

  • 两个div, 一个outer, 一个inner
  • box-shadow
  • transition

进度条-演示地址

雪花飘飘

思路:

  • n个postion为absolute的HTML节点
  • transition 随机贝塞尔曲线和动画时间

    雪花飘飘效果

类似外卖的添加到购物车

思路:

CSS Transitions

Using CSS transitions

TransitionEventSection

css-transitions | Can I Use

深入理解CSS过渡transition

我想学前端动画-CSS之transition的更多相关文章

  1. 结合jquery的前后端加密解密 适用于WebApi的SQL注入过滤器 Web.config中customErrors异常信息配置 ife2018 零基础学院 day 4 ife2018 零基础学院 day 3 ife 零基础学院 day 2 ife 零基础学院 day 1 - 我为什么想学前端

    在一个正常的项目中,登录注册的密码是密文传输到后台服务端的,也就是说,首先前端js对密码做处理,随后再传递到服务端,服务端解密再加密传出到数据库里面.Dotnet已经提供了RSA算法的加解密类库,我们 ...

  2. ife 零基础学院 day 1 - 我为什么想学前端

    与前端结缘   我是后端研发,毕业四年,用了四年C#,一开始写ASP.NET,有时会在asp页面写简单的js和html,做点css样式调整.当时的感触是前端调试太费劲了,因为没有js.html.css ...

  3. 好程序员web前端分享想要学习前端需要学那些课程

    好程序员web前端分享想要学习前端需要学那些课程,仔细思考了一下如何回答好这个话题,其实前端是一个涵盖面非常之广泛的一个职位,所需知识体系非常庞杂,与传统语言“想要精一行,必先通一门” 有很大差别, ...

  4. 为什么43%前端开发者想学Vue.js

    根据JavaScript 2017前端库状况调查 Vue.js是开发者最想学的前端库.我在这里说明一下我为什么认为这也是和你一起通过使用Vue构建一个简单的App应用程序的原因. 我最近曾与Evan ...

  5. CSS之transition(动画)

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

  6. CSS动画 animation与transition

    一.区分容易混淆的几个属性和值 先区分一下css中的几个属性:animation(动画).transition(过渡).transform(变形).translate(移动). CSS3中的trans ...

  7. Animate.css 前端动画开发教程

    1.首先下载animate.css文件: 2.打开动画预览地址选择想要的动画,地址:https://daneden.github.io/animate.css/  ,选择好后记住动画的名字在你下载的a ...

  8. css与javascript重难点,学前端,基础不好一切白费!

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  9. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

随机推荐

  1. 第八章 watch监听 84 watch-监视路由地址的改变

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. java 学习笔记(三)ZooKeeper集群搭建实例,以及集成dubbo时的配置 (转)

    ZooKeeper集群搭建实例,以及集成dubbo时的配置 zookeeper是什么: Zookeeper,一种分布式应用的协作服务,是Google的Chubby一个开源的实现,是Hadoop的分布式 ...

  3. Legendre公式和Kummer定理

    Legendre公式 对于质数\(p\),函数\(v_p(n)\)为\(n\)标准分解后\(p\)的次数 显然有 \[v_p(n!) = \sum\limits_{i = 1}^{\infty} \l ...

  4. SSH框架整合报错org.springframework.web.context.ContextLoaderListener

    是因为在导入的jar包中缺少了一个 org.springframework.web_3.1.4.release.jar 在网上下载即可 下载地址: http://www.java2s.com/Code ...

  5. php类相关知识----类常量,静态变量

    类常量 <?php class myuser { ;//定义的常量不带$符号,常量之前没有访问修饰符,常量之前没有修饰符号 public function monolog() { echo &q ...

  6. spring + junit 测试

    spring + junit 测试 需要一个工具类 package com.meizu.fastdfsweb; import org.junit.runner.RunWith; import org. ...

  7. VS的快捷操作

    连按两下Tab,生成代码块.修改i为n,再按一次Tab,对应位置自动改变. Ctrl+. 或者 Alt+Enter ctor  连按两下Tab,生成无返回值的构造函数(constructor func ...

  8. python测试网站访问速度

    # -*- coding: utf-8 -*- # @Author : Felix Wang # @time : 2018/8/13 22:13 # pip3 install pycurl impor ...

  9. zabbix服务端接收的数据类型,便于编写脚本向服务端提交数据

    1.数据类型1:zabbix_agent执行脚本提交字典 UserParameter=tcp_port_listen,/usr/local/zabbix/share/script/get_game_p ...

  10. 最大数maxnumber (HYSBZ 1012)(线段树区间查询和单点修改)(优雅的暴力)

    Problem 现在请求你维护一个数列,要求提供以下两种操作:1. 查询操作.语法:Q L 功能:查询当前数列中末尾L 个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度.2. 插入操作 ...