O(∩_∩)O~

这两天在看看CSS的相关内容，关于transition动画感觉很有意思，分享一下。

CSS负责给html加效果，自然少不了各种动画，今天介绍一下transition。

概述

看一段比较学术的定义：transition主要负责页面的过渡效果，transition可以使css的属性值在一定时间内平滑地过渡。这种效果可以在鼠标划过、点击、获得焦点或者对元素的任何改变中触发，并平滑地以动画效果改变css的属性值。

transition的几个常用属性

1.transition-property：设置哪些属性进行过渡。

2.transition-duration：完成过渡动画需要的时间，默认为零。

3.transition-timing-function：设置动画的缓冲效果，默认是ease（逐渐变慢）。其他常用的几个值有ease-in（加速），ease-out（减速），ease-in-out（先加速后减速）。

4.transition-delay：设置动画开始的延迟时间，默认是零。

ps：实际应用中，可以将四个属性简写到一条指令：transition：property duration timing-function delay; 实际就是把四个属性合到一块儿，中间用空格隔开。

实例

使用transition，实现一个过渡效果，一个红色的正方形，当鼠标进入该区域时，红色正方形放大一倍，同时变成绿色的圆形。鼠标离开，还原到初始状态。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>css的transition属性</title>

 </head>

 <style type="text/css">

     .box{

         width: 100px;

         height: 100px;

         margin: 50px auto;

         background-color: #f00;

         transition:all 1s;

     }

     /*css中的:hover选择器用于选择鼠标指针浮动在上面的元素。*/

     .box:hover{

         width: 200px;

         height: 200px;

         border-radius: 50%;

         background-color: #00bf00;

         transition-property: width,height,border-radius,background-color;

         transition-duration: 1s;

         transition-timing-function: ease-in;

         transition-delay: 100ms;

     }

 </style>

 <body>

 <div class="box"></div>

 </body>

 </html>

CSS过渡动画之transition的更多相关文章

  1. Vue过渡动画运用transition

    vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...

  2. CSS 过渡动画

    一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...

  3. 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画

    一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...

  4. CSS平滑过渡动画：transition

    <html> <head> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/boo ...

  5. css简单动画（transition属性）

    一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property     过渡效果的 CSS 属性的名称(height ...

  6. css过渡动画

    具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...

  7. css3-12 transition+css或transform实现过渡动画

    css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...

  8. 基于 React 实现一个 Transition 过渡动画组件

    过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...

  9. vue过渡 & 动画---进入/离开 & 列表过渡

    (1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...

随机推荐

  1. fiddler post 请求 webapi

    今天小伙伴遇到一个问题,大概就是说用fiddler post 一个参数,但是后台一直无法获取,如下 后来发现请求的条件有问题,而且也很容易忽略,正确如下 content-type的设定为默认值,pos ...

  2. 程序员减少代码BUG的7种方法，拒绝编程5分钟，查代码2小时！

    0.别对警告视而不见 相信不少的程序员会使用IDEA,使用它敲代码,有时候会出现警告,那么这时你对警告就不能视而不见了. 我们的目标是,写干净的代码,做风一样的男子! 1.编程习惯 种瓜得瓜种豆得豆, ...

  3. ZT 二叉树的非递归遍历

    ZT 二叉树的非递归遍历 二叉树的非递归遍历 二叉树是一种非常重要的数据结构,很多其它数据结构都是基于二叉树的基础演变而来的.对于二叉树,有前序.中序以及后序三种遍历方法.因为树的定义本身就 是递归定 ...

  4. java 解析json字符串

    如果转载我的这篇文章请注明出处,谢谢! 最近工作中,需要解析json格式的字符串,恰好有个例子,感觉不错,拿来分享. 运行这个类需要加载jar包:ezmorph-1.0.6.jar.json-lib- ...

  5. 【[TJOI2015]弦论】

    \(SA+SAM\) 第一问显然是一个\(SAM\)的经典问题,我们排完序之后直接使用一直往下找\(n+1-sa[i]-het[i]\)就好了,找到\(K\)减不动了输出就好了 第二问是\(SAM\) ...

  6. Oracle Listener

    一.监听器功能 1)监听客户端请求:监听器作为独立进程运行在数据库服务器上,监听特定网络端口(默认1521)服务请求. 2)为客户端请求分配oracle Server Process:监听器不直接处理 ...

  7. Day10 API

    String类 String是不可变类:值一旦确定了,就不会更改. public static void main(String[] args) { String s1 = "hello&q ...

  8. /dev/urandom非阻塞的发生器

    JAVA_OPTS="$JAVA_OPTS -Djava.security.egd=file:/dev/./urandom" /dev/urandom   /dev/urandom ...

  9. Python自动化之ajax返回表单验证的错误信息和序列化扩展

    form内置序列化错误 如果使用form提交数据的时候,可以直接返回错误信息到模板里面进行渲染 但是如果使用ajax处理呢 from django import forms from django.f ...

  10. nginx学习要点记录

    IO多路复用: 1.轻量 2.cpu亲和性:把CPU核心和nginx工作进程绑定,把每个worker进程固定在一个CPU上执行,减少切换cpu的cache miss,获得更好的性能 3.IO多路复用e ...