css动画(transition/transform/animation)

在开发中,一个好的用户操作界面,总会夹杂着一些动画。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>

 

转载于:https://www.cnblogs.com/www-123456/p/10837619.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264028.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql gtid寻找位置_【MySQL】UUID与GTID以及如何根据GTID找寻filename和position

Open Group于1997年10月发布&#xff0c;UUID遵从此协议。UUID被设计成一个在空间和时间上的唯一值。两次调用的UUID将产生两个不同的值&#xff0c;即使这些调用是在两个不连接的&#xff0c;彼此独立的计算机。由一串数字表示aaaaaaaa-bbbb-cccc-dddd-eeeeeeeeeeeeformat:mys…

javascript实例_网页空降与抖动

2007-07-03 23:54<html><body OnLoad"drop(400)">玄魂从天而降拉!!!!!!!!!!<script>function drop(n) {if(self.moveBy){ self.moveBy (0,-900); for(i n; i > 0; i--){ self.moveBy(0,3);self.moveBy(3,0); } for(j 50; j > 0…

邻接矩阵实现图的深度优先搜索(1)

邻接矩阵实现图的深度优先搜索(1) /************************************************************/ /********************图的深度优先搜索***********************/ /********************用邻接矩阵来实现***********************/ /************************************…

(56)zabbix Screens视图配置

screen翻译成中文为“屏幕”&#xff0c;在超市、单位等等地方都比较常见到监控视频&#xff0c;视频上有多块小视频&#xff0c;实际上zabbix screen和这个功能类似。你可以设置多个screen&#xff0c;每个screen可以显示特定信息&#xff0c;例如某台主机的cpu、内存、硬盘、…

spacy库的安装与使用_为 SpaCy 提供的中文数据模型

SpaCy 中文模型为 SpaCy 提供的中文数据模型. 模型目前还处于 beta 公开测试的状态 。在线演示基于 Jupyter notebook 的在线演示在 。 特性部分 王小明在北京的清华大学读书 这个 Doc 对象的属性信息:NER (New!)部分 王小明在北京的清华大学读书 这个 Doc 对象的 NER 信息:开始…

ASP对很长的文章做分页输出

阅读: 1 评论: 0 作者: eng308 发表于 2010-02-03 10:33 原文链接利用统计文章字数&#xff0c;然后达到一定字数就截断输出&#xff0c;但是分页的内容就会在莫名其妙的地方截断&#xff0c;不是很友好。很简单&#xff0c;在要截断的地方附近找下面的符号:&#xff1b;’”&a…

RH124-3 目录结构_转

在linux里安装的时候&#xff0c;是可以指定某分区装在某文件夹里目录意义 /bin 存放命令&#xff0c;不可以在装系统单独挂载分区/home/dev 存放硬件设备 不可以单独挂载分区/boot 500M 和系统启动相关文件 不能放在逻辑卷里面/etc 不可以单独创建分区/lib /lib64 存放模块/me…

软件性能测试的本质

为什么80%的码农都做不了架构师&#xff1f;>>> ‍ 淘宝网每年的双11活动都是对其服务器性能的挑战。因为在这一天所有商品半价&#xff0c;购物的用户量剧增。做为淘宝网的高层更多的关心在线用户数&#xff0c;用户交易量&#xff0c;总交易金额等&#xff0c;做…

AGILE

AGILE CMMI的理解在最佳实践的态度上非常类似自下而上的草根性,相比更侧重完善自身理论的CMMI更具实用性软件工程工具的作用理想和现实,艺术与工业期望与代价,灵活性,易用性CMMI实施为何没有软件工程工具的适用性评估?有没有建议换工具的?它与制造业以SAP这样的工具来做ERP实…

算法整理

1.冒泡排序 $arr array(5,2,6,2,3,1); for($i0;$i<count($arr);$i){ for($jcount($arr);$j>$i;$j--){ if($arr[$i]>$arr[$j-1]){ $b $arr[$i]; $arr[$i] $arr[$j-1]; $arr[$j-1] $b; } } } 2.快速排序&#xff0c; 取一个值&#xff0c;比他大的放一边&#xff0c…

无废话XML--XML约束(DTD)

基本术语一、序言Prolog&#xff1a;包括XML声明(XML Declaration)和文档类型声明(Document Type Declaration)。 二、良构(well-formed 规范的)&#xff1a;符合W3C定义的XML文档。 为什么XML需要验证&#xff1f; 对XML文件施加额外的约束&#xff0c;以便交流。举个…

c# 流,字节数组及字符串之间的转换

//1.流转换为字节数组&#xff0c;fileUpload为.net上传控件Stream stream fileUpload.FileContent;byte[] fileBuffer new byte[stream.Length];stream.Read(fileBuffer,0,(int)stream.Length);//2.字节数组转换为字符串string fileBody System.Text.Encoding.Default.GetS…

mysql周报内容范文_Mysql各种报表查询含实例,日报,周报,月报,时间差自动计算...

public List retrieve(IReport report) {List list new ArrayList();Map map new HashMap();// 设置结束日期if (null ! report.getEndTime()) {map.put(ReportMeta.PROP_ENDTIME, report.getEndTime());// 设置名称if (null ! report.getName()) {map.put(ReportMeta.PROP_N…

路由器01---k2刷Pandora

1.固件 固件(Firmware)就是写入EPROM&#xff08;可擦写可编程只读存储器&#xff09;或EEPROM(电可擦可编程只读存储器)中的程序。 对于独立可操作的电子产品&#xff0c;固件一般指它的操作系统&#xff08;“担任着一个数码产品最基础、最底层工作的软件才可以称之为固件”&…

windows mac 安装lua

mac从源码编译安装是最方便的&#xff0c;lua源码不足两万行&#xff0c;编译几秒钟的事。 打开terminal&#xff0c;依次输入以下命令&#xff1a; curl -R -O http://www.lua.org/ftp/lua-5.2.3.tar.gz tar zxf lua-5.2.3.tar.gz cd lua-5.2.3 make macosx test sudo make in…

python中squeeze函数_详解pytorch中squeeze()和unsqueeze()函数介绍

squeeze的用法主要就是对数据的维度进行压缩或者解压。先看torch.squeeze() 这个函数主要对数据的维度进行压缩&#xff0c;去掉维数为1的的维度&#xff0c;比如是一行或者一列这种&#xff0c;一个一行三列(1,3)的数去掉第一个维数为一的维度之后就变成(3)行。squeeze(a)就是…

新闻网大数据实时分析可视化系统项目——7、Kafka分布式集群部署

Kafka是由LinkedIn开发的一个分布式的消息系统&#xff0c;使用Scala编写&#xff0c;它以可水平扩展和高吞吐率而被广泛使用。目前越来越多的开源分布式处理系统如Cloudera、Apache Storm、Spark都支持与Kafka集成。 1.下载Kafka并安装 1&#xff09;下载Apache版本的Kafka。 …

关于Excel导入的问题记录

当Excel导入成为需要时&#xff0c;之前的导出Excel为html方式的方法就受阻了&#xff0c;于是&#xff0c;需要开始新的百度与google来解决问题。 前提为OLEDBExcel。 根据需求&#xff0c;多数是对于表的数据的导入。于是产生这么一个需求过程&#xff1a; 1。准备一个空的标…

vux 地图插件_基于vue的移动端组件vux的安装及使用

一、安装<1>. 在项目里安装vuxnpm install vux --save<2>. 安装vux-loader (这个vux文档似乎没介绍&#xff0c;当初没安装结果报了一堆错误)npm install vux-loader --save-dev<3>. 安装less-loader (这个是用以正确编译less源码&#xff0c;否则会出现 Ca…

代码优化

代码优化 并非所有的处理器级优化策略仅限于汇编。即使C这样的高级语言中&#xff0c;也由不少适用的规则。 减少上下文依赖 看如下程序&#xff1a; double list[100]; double sum 0; for (int i 0; i < 100; i) {sum list[i]; } 上面这段代码还可以优化吗&#xff1f;站…