css动画(transition/transform/animation)
博客已迁移到CSDN《https://blog.csdn.net/qq_33375499》
在开发中，一个好的用户操作界面，总会夹杂着一些动画。css用对少的代码，来给用户最佳的体验感，下面我总结了一些css动画属性的使用方法及用例代码供大家参考，在不对的地方，希望大佬直接拍砖评论。
1 transition(过渡)
使用语法:
transition: property duration timing-function delay;
参数：
(1) property(设置过渡效果的css属性名称)：none | all | property。none表示没有属性获得过渡效果；all表示所有属性都将获得过渡效果；property表示css属性列表，多个属性用逗号( , )隔开。
(2) duration(设置完成过渡效果的时间)：秒或毫秒(s/ms)。
(3) timing-function(设置效果速度的速度曲线)：linear，规定以相同速度开始到结束，等价于cubic-bezier(0,0,1,1)；ease，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ease-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速开始和结束，等价于cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在该函数定义自己的值，数值为0-1之间。
(4) delay(过渡效果何时开始)：值多少秒后执行过渡效果，如 2s ，表示2s后执行。
2 transform
transform属性应用于2D 或 3D转换。该属性允许我们能够对元素进行旋转、缩放、倾斜、移动这四类操作。
使用语法：
transform: none|transform-functions;
参数：
(1) none：定义不进行任何转换，一般用于注册掉该转换。
(2) transform-functions：定义要进行转换的类型函数。主要有：
旋转(rotate)：主要分为2D旋转和3D旋转。rotate(angle)，2D 旋转，参数为角度，如45deg；rotate(x,y,z,angle)，3D旋转，围绕原地到(x,y,z)的直线进行3D旋转；rotateX(angle)，沿着X轴进行3D旋转；rotateY(angle)；rotateZ(angle)；
缩放(scale)：一般用于元素的大小收缩设定。主要类型同上，有scale(x, y)、scale3d(x, y, z)、scaleX(x)、scaleY(y)、scaleZ(z)，其中x、y、z为收缩比例。
倾斜(skew)：主要用于对元素的样式倾斜。skew(x-angle, y-angle)，沿着x和y轴的2D倾斜转换；skewX(angle)，沿着x轴的2D倾斜转换；skew(angle)，沿着y轴的2D倾斜转换。
移动(translate)：主要用于将元素移动。translate(x, y)，定义向x和y轴移动的像素点；translate(x, y, z)，定义像x、y、z轴移动的像素点；translateX(x)；translateY(y)；translateZ(z)。
3 animation
该属性主要用于设置动画属性。
使用语法：
animation: name duration timing-function delay iteration-count direction;
参数：
(1) name：需要绑定到选择器的keyframe名称。
(2) duration：完成该动画需要花费的时间，秒或毫秒。
(3) timing-function：动画的运动速度曲线。linear，规定以相同速度开始到结束，等价于cubic-bezier(0,0,1,1)；ease，慢速开始，然后慢速结束，等价于cubic-bezier(0.25,0.1,0.25,1)；ease-in，以慢速开始，等价于cubic-bezier(0.42,0,1,1)；ease-out，以慢速结束，等价于cubic-bezier(0,0,0.58,1)；ease-in-out，以慢速开始和结束，等价于cubic-bezier(0.42,0,0.58,1)；cubic-bezier(n,n,n,n)，在该函数定义自己的值，数值为0-1之间。
(4) delay：设置动画在开始之前的延迟。
(5) iteration-count：设置动画执行的次数。
(6) direction：是否轮询反向播放动画。normal，默认值，动画应该正常播放；alternate，动画应该轮流反向播放。
下面展示了这些元素的测试代码：
<!DOCTYPE html>
<html>
<head>
<title>transition/transform</title>
</head>
<style type="text/css">
#div1 {
float: left;
height: 100px;
width: 100px;
background-color: red;
}
#div2 {
float: left;
height: 100px;
width: 100px;
background-color: green;
}
#div3 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
}
#div4 {
float: left;
height: 100px;
width: 100px;
background-color: #234F21;
}
#div5 {
float: left;
height: 100px;
width: 100px;
background-color: #af123c;
}
#div6 {
float: left;
height: 100px;
width: 100px;
background-color: #affa3c;
}
/* transition 实现多个属性 */
#div1:active {
width:200px;
height: 200px;
transition: width 2s ease,height 2s ease;
-moz-transition: width 2s ease,height 2s ease; /* Firefox 4 */
-webkit-transition: width 2s ease,height 2s ease; /* Safari 和 Chrome */
-o-transition: width 2s ease,height 2s ease; /* Opera */
}
/* transform 旋转 rotate */
#div2:hover {
transform:rotate(35deg);
-ms-transform:rotate(35deg); /* IE 9 */
-moz-transform:rotate(35deg); /* Firefox */
-webkit-transform:rotate(35deg); /* Safari 和 Chrome */
-o-transform:rotate(35deg); /* Opera */
}
/* transform 缩放 scale */
#div3:hover {
transform:scale(0.8, 1.5);
-ms-transform:scale(0.8, 1.5); /* IE 9 */
-moz-transform:scale(0.8, 1.5); /* Firefox */
-webkit-transform:scale(0.8, 1.5); /* Safari 和 Chrome */
-o-transform:scale(0.8, 1.5); /* Opera */
}
/* transform 倾斜 skew */
#div4:hover {
transform:skew(35deg);
-ms-transform:skew(35deg); /* IE 9 */
-moz-transform:skew(35deg); /* Firefox */
-webkit-transform:skew(35deg); /* Safari 和 Chrome */
-o-transform:skew(35deg); /* Opera */
}
/* transform 移动 translate */
#div5:hover {
transform:translate(45px, 45px);
-ms-transform:translate(45px, 45px); /* IE 9 */
-moz-transform:translate(45px, 45px); /* Firefox */
-webkit-transform:translate(45px, 45px); /* Safari 和 Chrome */
-o-transform:translate(45px, 45px); /* Opera */
}
/* transform 多个效果 */
#div6:hover {
transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px);
-ms-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* IE 9 */
-moz-transform:rotate(35deg) scale(0.8,rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px)translate(45px, 45px); /* Safari 和 Chrome */
-o-transform:rotate(35deg) scale(0.8, 1.5) skew(35deg) translate(45px, 45px); /* Opera */
}
</style>
<body>
<div id="div1">transition</div>
<div id="div2">transform rotate</div>
<div id="div3">transform scale</div>
<div id="div4">transform skew</div>
<div id="div5">transform translate</div>
<div id="div6">transform</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>transition/transform</title>
</head>
<style type="text/css">
/* animation */
.div7 {
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
animation-direction:alternate;
/* Safari and Chrome */
-webkit-animation:myfirst 5s infinite;
-webkit-animation-direction:alternate;
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst {/* Safari and Chrome */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-moz-keyframes myfirst {/* Firefox */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-o-keyframes myfirst {/* Opera */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style> <body> <div class="div7">animation</div> </body> </html>
css动画(transition/transform/animation)的更多相关文章
- css动画——transition和animation
http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 第一部分:CSS Transition 在CSS 3引 ...
- css 动画 transition和animation
本文参考:http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html 1. transition基本用法: < ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- css—动画（transform, transition, animation）
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- css transition transform animation例子讲解
1.transition属性: transition属性是一个速记属性有四个属性:transition-property , transition-duration, transition-timin ...
- CSS3动画 transition和animation的用法和区别
transition和animation都是CSS3新增的特性,使用时需要加内核 浏览器 内核名称 W3C IE -ms- Chrome/Safari -webkit- Firefoc - ...
- CSS动画效果之animation
Y(^o^)Y css动画大乱弹之animation. 概述 什么是animation呢?在回答这个问题之前,先要说明什么叫做@keyframe(关键帧).@keyframe算是一个动画模板.在其中, ...
- css动画 transition
比如输入框触交渐变 在原来的属性添加 : .form-control{-webkit-transition: all .3s; transition: all .3s;} .form-control: ...
- css3动画入门transition、animation
css3动画 transition.animation CSS3 transition demo <!DOCTYPE html> <html> <head> < ...
随机推荐
- hdu 5572 An Easy Physics Problem 圆+直线
An Easy Physics Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/ ...
- [Vue] : Vue概述
什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架. Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端三大主流框 ...
- T2695 桶哥的问题——吃桶 题解
校内测试 ------T3 对于这个题,首先想到的应该就是暴力枚举了吧,看看数据范围,60就是白送的啦!(但是我也不知道怎么才20分qwq) 思路分析: 这个题要你求所有套餐的总价值,先看一眼产生套餐 ...
- 决策树算法的Python实现—基于金融场景实操
决策树是最经常使用的数据挖掘算法,本次分享jacky带你深入浅出,走进决策树的世界 基本概念 决策树(Decision Tree) 它通过对训练样本的学习,并建立分类规则,然后依据分类规则,对新样本数 ...
- 事件驱动和IO操作
事件驱动和异步IO 通常,我们写服务器处理模型的程序时,有以下几种模型: (1)每收到一个请求,创建一个新的进程,来处理该请求: (2)每收到一个请求,创建一个新的线程,来处理该请求: (3)每收到一 ...
- 【软件工程】Alpha冲刺（4/6）
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...
- postgresql数据库的 to_date 和 to_timestamp 将 字符串转换为时间格式
数据库中:字符串 转换为 时间格式 二者区别: to_data 转换为 普通的时间格式 to_timestamp 转换可为 时间戳格式出错场景: 比较同一天 日期大小的时候,很容易出错 ...
- PPT:很多文字如何排版？（PPT如何美化？）
1.加入图标.形状(或者加入图片和色块搭配) 2.提取关键词作为标题(这个很重要) 下面看下示例: 这个是没修改前 修改后: 相信大家都会喜欢第二张吧 再看一个: 最近在学做PPT,有点上瘾了,哈哈哈 ...
- dubbo学习笔记(一)超时与重试
dubbo提供在provider和consumer端,都提供了超时(timeout)和重试(retries)的参数配置. 配置方式 provider端在<dubbo:service>中配置 ...
- PHP批量写入数据、批量删除数据
批量插入可以参考$sql = "insert into data (id,ip,data) values ";for($i=0;$i<100;$i++){$sqls[]=& ...