css动画之过渡
2017-11-29 22:37
330 查看
过渡属性为transition,是属于css3的属性,所以在处理不同浏览器的兼容性问题时,记得加上私有前缀。代码如下:
transition表示的是哪些属性执行动画所需要的时间;transform是应用于元素的2D或者3D转换,其中属性值有rotate表示的是旋转多少度,translate表示的是在X和Y轴移动多少,scale表示的是缩放多少倍,skew表示的是需要倾斜的度数。其中动画效果中,还有一个transform-origin属性,表示的是动画执行的基准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s;
}
div:hover {
width: 260px;
height: 260px;
transform: rotate(320deg);
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>
transition表示的是哪些属性执行动画所需要的时间;transform是应用于元素的2D或者3D转换,其中属性值有rotate表示的是旋转多少度,translate表示的是在X和Y轴移动多少,scale表示的是缩放多少倍,skew表示的是需要倾斜的度数。其中动画效果中,还有一个transform-origin属性,表示的是动画执行的基准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
transition: all 2s;
}
div:hover {
width: 260px;
height: 260px;
transform: rotate(320deg);
}
</style>
</head>
<body>
<div>1</div>
</body>
</html>
相关文章推荐
- CSS过渡、动画、变换,综合实例
- CSS实现鼠标悬浮内容自动撑开的过渡动画
- CSS基础-29CSS动画-过渡
- 浏览器展示CSS伪类的动画和过渡效果应用
- CSS的过渡效果及动画效果:transition&animation
- 基于ReactCSSTransitionGroup实现react-router过渡动画
- CSS平滑过渡动画:transition
- 【CSS】过渡、动画和变换
- CSS动画-过渡
- CSS 小结笔记之变形、过渡与动画
- H5之13__CSS过渡、动画和变换
- CSS-过渡效果和动画效果
- CSS过渡动画之transition
- 浏览器展示CSS伪类的动画和过渡效果应用
- Transit – 超平滑的 CSS 过渡和变换动画效果插件
- css动画和过渡
- html css学习笔记-过渡,动画
- CSS伪类的动画和过渡效果应用
- 纯CSS实现圆环渐变过渡加载动画
- vue2.0中css过渡动画总结