css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画
一、总结
一句话总结：首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1、哪些样式可以设置过渡动画？
transform加别的css
11 transition: width 2s, height 2s, transform 2s;
2、如何设置为hover里面的所有样式都执行过渡动画？
transition: all 1s ease 0s;
3、过渡动画如何实现？
首先要设置hover后的效果，然后在transition里面指定执行哪些样式和执行时间为多长。
1 div{
2 width:256px;
3 height:256px;
4 border:2px solid #999;
5 overflow:hidden;
6 transition:transform 2s;
7 }
8
9 div:hover{
10 transform:rotate(360deg);
11 }
二、transition+css或transform实现过渡动画
1、相关知识
不仅transform可以，其它css也可以
2、代码
div{
width:256px;
height:256px;
border:2px solid #999;
overflow:hidden;
transition:transform 2s;
}
div:hover{
transform:rotate(360deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
div {
width: 100px;
height: 100px;
background: red;
11 transition: width 2s, height 2s, transform 2s;
} div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p> <div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>
css3-12 transition+css或transform实现过渡动画的更多相关文章
- css3中什么时候用transition什么时候用animation实现动画
在css3中transition和animation都可以实现动画效果,但是我们什么时候用transition,什么时候用animation. 当有事件触发动画的时候我们就用transition.比如 ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- CSS3特效之转化（transform）和过渡（transition）
CSS3特效之转化(transform)和过渡(transition) 在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition).有人可能会有疑 ...
- css3中的变形（transform）、过渡(transtion)、动画(animation)
Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix.下面我们一 ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 【CSS3】transition过渡和animation动画
转自:http://blog.csdn.net/XIAOZHUXMEN/article/details/52003135 写在前面的话: 最近写css动画发现把tansition和animation弄 ...
- CSS3之transition&transform
参考网页: CSS3 transform 属性使用详解: http://www.renniaofei.com/code/css3-transform-shuxing-shiyong-xiangjie/ ...
- CSS过渡动画之transition
O(∩_∩)O~ 这两天在看看CSS的相关内容,关于transition动画感觉很有意思,分享一下. CSS负责给html加效果,自然少不了各种动画,今天介绍一下transition. 概述 看一段比 ...
- 12 react 基础 的 css 过渡动画 及 动画效果 及 使用 react-transition-group 实现动画
一. 过渡动画 # index.js import React from 'react';import ReactDOM from 'react-dom';import App from './app ...
随机推荐
- CSS动态实现文本框清除按钮的隐藏与显示
当前现代浏览器中,Chrome浏览器下type=search的输入框会有清除按钮的动态呈现,不过搜索input框尺寸不太好控制(padding无视):FireFox浏览器貌似任何类型的输入框都无动于衷 ...
- usermod---修改用户账户信息
usermod可用来修改用户帐号的各项设定. 语法 usermod [-LU][-c <备注>][-d <登入目录>][-e <有效期限>][-f <缓冲天数 ...
- 洛谷 P1709 [USACO5.5]隐藏口令Hidden Password
P1709 [USACO5.5]隐藏口令Hidden Password 题目描述 有时候程序员有很奇怪的方法来隐藏他们的口令.Binny会选择一个字符串S(由N个小写字母组成,5<=N<= ...
- （二十二）unity4.6学习Ugui中文文档-------交互-Eventsystem & Binding
大家好,我是孙广东. 转载请注明出处:http://write.blog.csdn.net/postedit/38922399 更全的内容请看我的游戏蛮牛地址:http://www.unityma ...
- actionbar-去掉背景的阴影
今天发现一个问题,就是actionbar跟界面的交界处,会有一个阴影,通过调查发现,这个阴影是actionbar的.然后通过在网上找资料,完美解决了问题.解决方法如下 1.在这个actionbar所在 ...
- 新手前端笔记之--初识css
css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...
- Node里面的对象创建问题
1.利用new Object()创建时 var a =new Object() a.b = 1 console.log(a) // 打印出来是[object Object] console.log(J ...
- 我的第一个JS组件-跨浏览器JS调试工具
武汉九天鸟-p2p网贷系统开发-互联网应用软件开发 公司官网:http://jiutianniao.com 社交问答:http://ask.jiutianniao.com 最近,在看公司一个JS大牛 ...
- Direct2D开发：向 MFC 项目添加 Direct2D 对象
0X01 创建 MFC 应用程序: 在“文件”菜单上指向“新建”,然后单击“项目”. 在“新建项目”对话框左窗格的“已安装的模板”下,展开“Visual C++”,然后选择“MFC”. 在中间窗格中, ...
- 1、DOM4J简介
1.DOM4J简介 DOM4J是 dom4j.org 出品的一个开源 XML 解析包.DOM4J应用于 Java 平台,采用了 Java 集合框架并完全支持 DOM,SAX 和 JAXP. DOM4J ...