自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
div{
width: 200px;
height: 100px;
background: pink;
border: 1px solid #ccc;
margin-bottom: 10px;
}
.box1{
transform: translate(20px, 15px);
-webkit-transform: translate(20px, 15px);
-moz-transform: translate(20px, 15px);
-ms-transform: translate(20px, 15px);
-o-transform: translate(20px, 15px);
}
.box2{
transform: translate3d(5px, 10px, 500px);
-webkit-transform: translate3d(5px, 10px, 500px);
-moz-transform: translate3d(5px, 10px, 500px);
-ms-transform: translate3d(5px, 10px, 500px);
-o-transform: translate3d(5px, 10px, 500px);
}
.box3{
transform: translateX(30px);
-webkit-transform: translateX(30px);
-moz-transform: translateX(30px);
-ms-transform: translateX(30px);
-o-transform: translateX(30px);
}
.box4{
transform: scale(2.0, 2.0);
-webkit-transform: scale(2.0, 2.0);
-moz-transform: scale(2.0, 2.0);
-ms-transform: scale(2.0, 2.0);
-o-transform: scale(2.0, 2.0);
}
.box5{
transform: scale3d(1, 1, 2.0);
-webkit-transform: scale3d(1, 1, 2.0);
-moz-transform: scale3d(1, 1, 2.0);
-ms-transform: scale3d(1, 1, 2.0);
-o-transform: scale3d(1,1, 2.0);
}
.box6{
transform: scaleZ(2);
-webkit-transform: scaleZ(2);
-moz-transform: scaleZ(2);
-ms-transform: scaleZ(2);
-o-transform: scaleZ(2);
}
.box7{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
}
.box8{
transform: rotate3d(1, 1, -1, 30deg);
-webkit-transform: rotate3d(1, 1, -1, 30deg);
-moz-transform: rotate3d(1, 1, -1, 30deg);
-ms-transform: rotate3d(1, 1, -1, 30deg);
-o-transform: rotate3d(1, 1, -1, 30deg);
}
.box9{
transform: rotateX(80deg);
-webkit-transform: rotateX(80deg);
-moz-transform: rotateX(80deg);
-ms-transform: rotateX(80deg);
-o-transform: rotateX(80deg);
}
.box10{
transform: skew(30deg, 30deg);
-webkit-transform: skew(30deg, 30deg);
-moz-transform: skew(30deg, 30deg);
-ms-transform: skew(30deg, 30deg);
-o-transform: skew(30deg, 30deg);
}
.box11{
transform: skewX(45deg);
-webkit-transform: skewX(45deg);
-moz-transform: skewX(45deg);
-ms-transform: skewX(45deg);
-o-transform: skewX(45deg);
}
.box12{
position: relative;
padding: 20px;
perspective: 150;
-webkit-perspective: 150;
}
.box12>div{
width: 160px;
height: 60px;
border: 1px solid #ddd;
background: #09f;
transform: rotateX(45deg);
-webkit-transform: rotateX(45deg);
-moz-transform: rotateX(45deg);
-ms-transform: rotateX(45deg);
-o-transform: rotateX(45deg);
}
.box13{
background: #09f;
width: 200px;
transition: width 2s,background 2s;
-webkit-transition: width 2s,background 2s;
-moz-transition: width 2s,background 2s;
-ms-transition: width 2s,background 2s;
-o-transition: width 2s,background 2s;
}
.box13:hover{
width: 400px;
background: blue;
}
.box14{
position: relative;
animation: move 5s linear infinite alternate;;
-webkit-animation: move 5s linear infinite alternate;;
-moz-animation: move 5s linear infinite alternate;;
-ms-animation: move 5s linear infinite alternate;;
-o-animation: move 5s linear infinite alternate;
}
/* animation-play-state: paused|running;设置对象动画的状态，下例hover运动暂停 */
.box14:hover{
animation-play-state: paused;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
} @keyframes move {
from{left: 0px;}
to{left: 500px;}
}
@-webkit-keyframes move{
0%{left: 0px;}
100%{left: 500px;}
}
.box15 span{
display: block;
font-weight: bolder;
font-size: 20px;
}
.a1{
transform: translate(60px);
-webkit-transform: translate(60px);
-moz-transform: translate(60px);
animation: move1 2s ease-out forwards;
-webkit-animation: move1 2s ease-out forwards;
-moz-animation: move1 2s ease-out forwards;
}
@keyframes move1{
0%{transform: translate(0px);opacity: 0;}
40%{transform: translate(20px);opacity: 0.4;}
70%{transform: translate(40px);opacity: 1.0;}
100%{transform: translate(60px);opacity: 0;}
}
@-webkit-keyframes move1{
0%{-webkit-transform: translate(0px);opacity: 0;}
40%{-webkit-transform: translate(20px);opacity: 0.4;}
70%{-webkit-transform: translate(40px);opacity: 1.0;}
100%{-webkit-transform: translate(60px);opacity: 0;}
}
@-moz-keyframes move1{
0%{-moz-transform: translate(0px);opacity: 0;}
40%{-moz-transform: translate(20px);opacity: 0.4;}
70%{-moz-transform: translate(40px);opacity: 1.0;}
100%{-moz-transform: translate(60px);opacity: 0;}
}
.a3{
opacity: 0;
transform: translate(20px);
-webkit-transform: translate(20px);
-moz-transform: translate(20px);
animation: move3 2s ease-in 2s forwards;
-webkit-animation: move3 2s ease-in 2s forwards;
-moz-animation: move3 2s ease-in 2s forwards;
}
@keyframes move3{
0%{transform: translate(120px);opacity: 0;}
40%{transform: translate(80px);opacity: 0.4;}
70%{transform: translate(40px);opacity: 1.0;}
100%{transform: translate(20px);opacity: 0;}
}
@-webkit-keyframes move3{
0%{-webkit-transform: translate(120px);opacity: 0;}
40%{-webkit-transform: translate(80px);opacity: 0.4;}
70%{-webkit-transform: translate(40px);opacity: 1.0;}
100%{-webkit-transform: translate(20px);opacity: 0;}
}
@-moz-keyframes move3{
0%{-moz-transform: translate(120px);opacity: 0;}
40%{-moz-transform: translate(80px);opacity: 0.4;}
70%{-moz-transform: translate(40px);opacity: 1.0;}
100%{-moz-transform: translate(20px);opacity: 0;}
}
.a2{
opacity: 0;
font-size: 36px;
text-align: center;
animation: move2 2s ease-in 4s forwards;
-webkit-animation: move2 2s ease-in 4s forwards;
-moz-animation: move2 2s ease-in 4s forwards;
}
@keyframes move2{
0%{opacity: 0;}
20%{opacity: 0.6;}
40%{opacity: 0.8;}
60%{opacity: 0.4;}
80%{opacity: 0.8;}
100%{opacity: 1.0;}
}
@-webkit-keyframes move2{
0%{opacity: 0;}
20%{opacity: 0.6;}
40%{opacity: 0.8;}
60%{opacity: 0.4;}
80%{opacity: 0.8;}
100%{opacity: 1.0;}
}
@-moz-keyframes move2{
0%{opacity: 0;}
20%{opacity: 0.6;}
40%{opacity: 0.8;}
60%{opacity: 0.4;}
80%{opacity: 0.8;}
100%{opacity: 1.0;}
}
</style>
</head>
<body>
<!-- transform属性向元素应用2D或3D转换，我们可以旋转、缩放、移动、倾斜元素，语法：transform: none|transform-functions; -->
<!-- translate(x,y)--定义2D位移 -->
<div class="box1">translate(x,y)</div>
<!-- translate(x,y,z)--定义3D位移 -->
<div class="box2">translate(x,y,z)</div>
<!-- translateX(x)--定义只按X轴位移 (同理按Y轴，3D的Z轴)-->
<div class="box3">translateX(x)</div> <!-- scale(x,y)--定义2D缩放转换 -->
<div class="box4">scale(x,y)</div>
<!-- scale3d(x,y,z)--定义3D缩放转换 -->
<div class="box5">scale3d(x,y,z)</div>
<!-- scaleZ(z)--定义只按Z轴缩放（同理按Y轴，X轴） -->
<div class="box6">scaleZ(z)</div> <!-- rotate(angle)--定义2D旋转 -->
<div class="box7">rotate(angle)</div>
<!-- rotate3d(angle)--定义3D旋转 x,y,z的值组成在3d空间的矢量坐标，对象将会围绕这个坐标轴旋转-->
<div class="box8">rotate3d(x,y,z,angle)</div>
<!-- rotateX(angle) 定义沿X轴的3d旋转(同理设置Y轴Z轴的3d旋转)-->
<div class="box9">rotateX(angle)</div> <!-- skew(x-angle,y-angle) 定义沿X轴和Y轴的倾斜转换-->
<div class="box10">skew(x-angle,y-angle)</div>
<!-- skewX(xangle) 定义沿X轴的2d倾斜转换(同理设置Y轴的2d倾斜转换)-->
<div class="box11">skewX(angle)</div> <!-- perspective(n)为3D转换元素定义透视视图(当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身) -->
<div class="box12">
<div>perspective(n)</div>
</div> <!-- transition属性对元素设置对象变换时的过渡,用于设置4个过渡属性：
transition-property--参与过渡的属性、
transition-duration--对象过渡的持续时间、
transition-timing-function--对象中过渡的动画类型、
transition-delay--对象延迟过渡的时间 -->
<!-- 如果只提供一个<time>参数，则为 <' transition-duration '> 的值定义；如果提供二个<time>参数，则第一个为 <' transition-duration '> 的值定义，第二个为 <' transition-delay '> 的值定义 -->
<div class="box13">transition过渡效果</div> <!-- animation 设置对象元素的动画特效，用于设置6个动画属性（默认值none 0 ease 0 1 normal）：
animation-name--需要绑定到选择器上的动画名称、
animation-duration--完成动画所花费的时间、
animation-timing-function--规定动画的速度曲线、
animation-delay--规定在动画开始前的延迟、
animation-iteration-count--规定动画播放的次数、
animation-direction--规定动画是否轮流反向播放
( forwards--当动画完成后，保持最后一个属性值 )-->
<div class="box14">animation动画特效</div>
<div class="box15">
<span class="a1">css3 animation</span>
<span class="a2">css3 animation</span>
<span class="a3">css3 animation</span>
</div>
</body>
</html>
自己总结的CSS3中transform变换、transition过渡、animation动画的基本用法的更多相关文章
- 关于CSS3中transform变换的小坑
2017年6月30日15:05:46 今天在写一个demo的时候,发现CSS3中transform变换的一个特性. 首先,我先描述一下我发现的情况(问题再现): <div class=" ...
- 第98天：CSS3中transform变换详解
transform变换详解 本文主要介绍变形transform. Transform字面上就是变形,改变的意思.在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放sc ...
- css 动画（二） transition 过渡 & animation 动画
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! translate:平移:是transform的一个属性: transform:变形:是一个静态属性,可以 ...
- CSS3中动画属性transform、transition和animation
Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- css3实践之图片轮播（Transform，Transition和Animation）
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
- 好吧，CSS3 3D transform变换，不过如此！
一.写在前面的秋裤 早在去年的去年,我就大肆介绍了2D transform相关内容.看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了 ...
随机推荐
- hdu 5120 Intersection (圆环面积相交->圆面积相交)
Problem Description Matt is a big fan of logo design. Recently he falls in love with logo made up by ...
- CSU 1503: 点到圆弧的距离（计算几何）
题目描述 输入一个点 P 和一条圆弧(圆周的一部分),你的任务是计算 P 到圆弧的最短距离.换句话 说,你需要在圆弧上找一个点,到 P点的距离最小. 提示:请尽量使用精确算法.相比之下,近似算法更难通 ...
- VMware安装MAC OS
测试环境 安装环境:win10 .VMware Workstation Pro14 镜像:OS X 10.11.5(由于太大,就没有上传网盘,网上也有很多资源) 安装准备 安装前先把关于VMware的 ...
- python 对 excel 的操作
参考:https://www.php.cn/python-tutorials-422881.html 或 https://blog.51cto.com/wangfeng7399/2339556(使用 ...
- 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响
原文地址 背景 开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存 ...
- 做一个简单的scrapy爬虫
前言: 做一个简单的scrapy爬虫,带大家认识一下创建scrapy的大致流程.我们就抓取扇贝上的单词书,python的高频词汇. 步骤: 一,新建一个工程scrapy_shanbay 二,在工程中中 ...
- MySQL清除表数据而保留表结构TRUNCATE TABLE
有时候我们会需要清除一个表格中的所有资料.要达到者个目的,一种方式是使用 DROP TABLE 指令,不过这样整个表格就消失,表无法再被用了.另一种方式就是运用 TRUNCATE TABLE 的指令. ...
- webstorm启动vue项目配置
使用命令窗口运行 1. npm run mock 2.npm run dev 每次都打开命令窗口比较麻烦,可以在webstorm内进行配置,从webstorm内启动 选中run下面的edit conf ...
- 2.Jmeter 如何在jsr223 脚本中停止测试任务
Jmeter 如何在jsr223 脚本中停止测试任务 在可以直接引用ctx的变量的processor中可以执行如下脚本即可. (例如jsr223 postprocessor中) ctx.getEngi ...
- pyppeteer模块的基本使用
pyppeteer模块的基本使用 引言 Selenium 在被使用的时候有个麻烦事,就是环境的相关配置,得安装好相关浏览器,比如 Chrome.Firefox 等等,然后还要到官方网站去下载对应的驱动 ...