CSS过渡动画之transition
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的更多相关文章
- Vue过渡动画运用transition
vue的过渡动画,主要是transition标签的使用,配合css动画实现的.官方文档css过渡 通过点击事件来切换show的值来改变显示的文本,下面的css通过进入离开时的在匀速状态下xxs(秒)下 ...
- CSS 过渡动画
一.过渡 过渡(transition)是CSS3中具有颠覆性的特征之一,可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果. 在CSS3 ...
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...
- CSS平滑过渡动画：transition
<html> <head> <link href="http://cdn.bootcss.com/twitter-bootstrap/3.0.2/css/boo ...
- css简单动画（transition属性）
一.对transition属性的认识 1.transition 属性是一个简写属性,可用于设置四个过渡属性:transition-property 过渡效果的 CSS 属性的名称(height ...
- css过渡动画
具体代码:1.水平翻转-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);transfo ...
- css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画 一.总结 一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
- 基于 React 实现一个 Transition 过渡动画组件
过渡动画使 UI 更富有表现力并且易于使用.如何使用 React 快速的实现一个 Transition 过渡动画组件? 基本实现 实现一个基础的 CSS 过渡动画组件,通过切换 CSS 样式实现简单的 ...
- vue过渡 & 动画---进入/离开 & 列表过渡
(1)概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果.包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animat ...
随机推荐
- [2018HN省队集训D1T1] Tree
[2018HN省队集训D1T1] Tree 题意 给定一棵带点权树, 要求支持下面三种操作: 1 root 将 root 设为根. 2 u v d 将以 \(\operatorname{LCA} (u ...
- NTRIP协议学习（一）
这篇博客讲得很清晰. https://blog.csdn.net/sinat_19447667/article/details/67637167 可以参考的文献包括:<多系统GNSS实时数据质 ...
- 访问一个HTTPS的网站的大致流程
浏览器向服务器发送请求,请求中包括浏览器支持的协议,并附带一个随机数. 服务器收到请求后,选择某种非对称加密算法,把数字证书签名公钥.身份信息发送给浏览器,同时也附带一个随机数. 浏览器收到后,验证证 ...
- tomcat-7.0.30安装及配置
使用说明: 一.1.下载jdk(http://java.sun.com/javase/downloads/index.jsp),2.安装jdk-6u14-windows-i586.exe 3.配置环境 ...
- 跟我一起阅读Java源代码之HashMap（三）
上一节我们讲到了如何用散列和链表实现HashMap,其中有一个疑问今天已经有些答案了,为什么要用链表而不是数组 链表的作用有如下两点好处 1. remove操作时效率高,只维护指针的变化即可,无需进行 ...
- php解析xml文件的方法
最近一段时间在做模板包导入.模板包中包含有xml文件,,需要解析成给定的php数组格式. 我接触到了两种方法,分别是DOMDocument 方法和 simple_load_file. 个人偏好后一种, ...
- JavaScript创建对象的6种方式
JavaScript创建对象简单的说,无非就是使用内置对象(Object)或各种自定义对象,当然还可以用JSON,但写法有很多种,也能混合使用. 1.对象字面量的方式 person = {name : ...
- 4-2 R语言函数 apply
#apply函数,沿着数组的某一维度处理数据 #例如将函数用于矩阵的行或列 #与for/while循环的效率相似,但只用一句话可以完成 #apply(参数):apply(数组,维度,函数/函数名) & ...
- 2879. [NOI2012]美食节【费用流】
Description CZ市为了欢迎全国各地的同学,特地举办了一场盛大的美食节.作为一个喜欢尝鲜的美食客,小M自然不愿意错过这场盛宴.他很快就尝遍了美食节所有的美食.然而,尝鲜的欲望是难以满足的.尽 ...
- [USACO08NOV]Mixed Up Cows
嘟嘟嘟 一看n那么小,那一定是状压dp了(表示从没写过,慌). 首先dp[i][j](i 是一个二进制数,第x位为1代表选了第x头牛),表示 i 这个状态最后一头牛是第 j 头牛时的方案数. 然后当 ...