css动画定义,CSS3中Animation动画的定义和调用

现在经常会看到一些门户网站的专题使用到CSS3的动画,咋也不能落伍,在此这梳理下动画知识吧,便于后面用到。接下来介绍下Animation动画的定义和调用,在介绍Animation之前需要了解下Keyframes,英文意思就是关键帧,它相当于我们flash里面的帧。

Keyframes具有其自己的语法规则,他的命名是由"@keyframes"开头,后面紧接着是这个“动画的名称”加上一对花括号“{}”,括号中就是一些不同时间段样式

规则,有点像我们css的样式写法一样。对于一个"@keyframes"中的样式规则是由多个百分比构成的,如“0%”到"100%"之间,我们可以在

这个规则中创建多个百分比,我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性,从而让元素达到一种在不断变化的效果,比如说移动,改变元素

颜色,位置,大小,形状等,不过有一点需要注意的是,我们可以使用“fromt”“to”来代表一个动画是从哪开始,到哪结束,也就是说这个

"from"就相当于"0%"而"to"相当于"100%",值得一说的是,其中"0%"不能像别的属性取值一样把百分比符号省略,我们在这里必须加上百

分符号(“%”)如果没有加上的话,我们这个keyframes是无效的,不起任何作用。因为keyframes的单位只接受百分比值。

Keyframes可以指定任何顺序排列来决定Animation动画变化的关键位置。其具体语法规则如下:keyframes-rule: '@keyframes' IDENT '{' keyframes-blocks '}';

keyframes-blocks: [ keyframe-selectors block ]* ;

keyframe-selectors: [ 'from' | 'to' | PERCENTAGE ] [ ',' [ 'from' | 'to' | PERCENTAGE ] ]*;

none:表示不进么变换;表示一个或多个变换函数,以空格分开;换句话说就是我们同时对一

个元素进行transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗

号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。

取值:

transform属性实现了一些可用SVG实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放

和移动元素

,他有几个属性值参数:rotate;translate;scale;skew;matrix。下面我们分别来介绍这几个属性值参数的具体使用方法:

我把上面的语法综合起来@keyframes IDENT {

from {

Properties:Properties value;

}

Percentage {

Properties:Properties value;

}

to {

Properties:Properties value;

}

}

其中IDENT是一个动画名称,你可以随便取,当然语义化一点更好,Percentage是百分比值,我们可以添加许多个这样的百

分比,Properties为css的属性名,比如说left,background等,value就是相对应的属性的属性值。值得一提的是,我们

from和to

分别对应的是0%和100%。这个我们在前面也提到过了。到目前为止支技animation动画的只有webkit内核的浏览器,所以我需要在上面的基础

上加上-webkit前缀,据说Firefox5可以支持css3的 animation动画属性。

举个官方实例来,大伙就可以看得很清楚了,如下:@-webkit-keyframes 'wobble' {

0% {

margin-left: 100px;

background: green;

}

40% {

margin-left: 150px;

background: orange;

}

60% {

margin-left: 75px;

background: blue;

}

100% {

margin-left: 100px;

background: red;

}

}

这里我们定义了一个叫“wobble”的动画,他的动画是从0%开始到100%时结束,从中还经历了一个40%和60%两个过程,上面代码具体意思

是:wobble动画在0%时元素定位到left为100px的位置背景色为green,然后40%时元素过渡到left为150px的位置并且背景色为

orange,60%时元素过渡到left为75px的位置,背景色为blue,最后100%结束动画的位置元素又回到起点left为100px处,背景

色变成red。

定义好动画,如何调用呢,如下:.box {

width: 50px;

height: 50px;

margin-left: 100px;

background: blue;

-webkit-animation-name:'wobble';/*动画属性名,也就是我们前面keyframes定义的动画名*/

-webkit-animation-duration: 10s;/*动画持续时间*/

-webkit-animation-timing-function: ease-in-out; /*动画频率,和transition-timing-function是一样的*/

-webkit-animation-delay: 2s;/*动画延迟时间*/

-webkit-animation-iteration-count: 10;/*定义循环资料,infinite为无限次*/

-webkit-animation-direction: alternate;/*定义动画方式*/

}

可能大伙看到上面不是很了解,我们看下其属性的语法,再回来看这个例子就很清楚了

一、animation-name:

语法:animation-name: none | IDENT[,none | IDENT]*;

取值说明:

animation-name:是用来定义一个动画的名称,其主要有

两个值:IDENT是由Keyframes创建的动画名,换句话说此处的IDENT要和Keyframes中的IDENT一致,如果不一致,将不能实现任

何动画效果;none为默认值,当值为none时,将没有任何动画效果。另外我们这个属性跟前面所讲的transition一样,我们可以同时附几个

animation给一个元素,我们只需要用逗号“,”隔开。

二、animation-duration:

语法:animation-duration: [,]*

取值说明:

animation-duration是用来指定元素播放动画所持续的时间长,取值:为数值,单位为s (秒.)其默认值为“0”。这个属性跟transition中的transition-duration使用方法是一样的。

三、animation-timing-function:

语法:animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , ) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(, , , )]*

取值说明:

animation-timing-function:是指元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式。他和transition中的transition-timing-function一样,具有以下六种变换方式:ease;ease-in;ease-in-out;linear;cubic-bezier。具体的使用方法如下:

transition-timing-function的值允许你根据时间的推进去改变属性值的变换速率,transition-timing-function有6个可能值:

1、ease:(逐渐变慢)默认值,ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear:(匀速),linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in:(加速),ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out:(减速),ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out:(加速然后减速),ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier:(该值允许你去自定义一个时间曲线), 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内,否则无效。

其是cubic-bezier为通过贝赛尔曲线来计算“转换”过程中的属性值,如下曲线所示,通过改变P1(x1, y1)和P2(x2, y2)的坐标可以改变整个过程的Output Percentage。初始默认值为default.

四、animation-delay:

语法:animation-delay: [,]*

取值说明:

animation-delay:是用来指定元素动画开始时间。取值为为数值,单位为s(秒),其默认值也是0。这个属性和transition-delayy使用方法是一样的。

五、animation-iteration-count

语法:animation-iteration-count:infinite |  [, infinite | ]*

取值说明:

animation-iteration-count是用来指定元素播放动画的循环次数,其可以取值为数字,其默认值为“1”;infinite为无限次数循环。

六、animation-direction

语法:animation-direction: normal | alternate [, normal | alternate]*

取值说明:

animation-direction是用来指定元素动画播放的方向,其只有两个值,默认值为normal,如果设置为normal时,动画的每次循环都是向前播放;另一个值是alternate,他的作用是,动画播放在第偶数次向前播放,第奇数次向反方向播放。

七、animation-play-state

语法:animation-play-state:running | paused [, running | paused]*

取值说明:

animation-play-state主要是用来控制元素动画的

播放状态。其主要有两个值,running和paused其中running为默认值。他们的作用就类似于我们的音乐播放器一样,可以通过paused将

正在播放的动画停下了,也可以通过running将暂停的动画重新播放,我们这里的重新播放不一定是从元素动画的开始播放,而是从你暂停的那个位置开始播

放。另外如果暂时了动画的播放,元素的样式将回到最原始设置状态。这个属性目前很少内核支持,所以只是稍微提一下。

上面我们分别介绍了animation中的各个属性的语法和取值,那么我们综合上面的内容可以给animation属性一个速记法:animation:[ ||  ||  ||  ||  || ] [, [ ||  ||  ||  ||  || ] ]*

如下图所示

c5eab9a9b0f21d89bb60a48734b7b554.png

相信大家看完语法后,应该对于上面的例子很清楚了吧。不过话说回来动画是可以做了,但兼容它的浏览器不多啊,目前只有苹果,谷歌,火狐支持。

好啦,了解完这些就可以应用到实际应用中了。

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

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

相关文章

mysql5.7+proxy_mysql 5.7+mysql-proxy 0.8.5 读写分离

主从环境:mysql操做系统:CentOS6.5_x64linux主服务器Master:192.168.0.103sql从服务器Slave:192.168.0.105后端调度服务器MySQL-Proxy:192.168.0.104服务器1、mysql主从复制tcp2、mysql-proxy实现读写分离测试一、安装…

flask ajax 文件上传,python flask使用ajax请求上载文件。文件为空

我正在尝试上传一个大约1.62MB的图像到一个用烧瓶写的终点。request.files对象始终为空。我检查了以下问题,但没有成功:这是我的服务器:from flask import Flask, request, jsonify, render_templateimport sysapp Flask(__name__)app.config[UPLOAD_FOLDER] r"C:\Temp&…

mysql 账户管理_Mysql账户管理原理与实现方法详解

本文实例讲述了Mysql账户管理原理与实现方法。分享给大家供大家参考,具体如下:账户管理在生产环境下操作数据库时,绝对不可以使用root账户连接,而是创建特定的账户,授予这个账户特定的操作权限,然后连接进行…

宏脉系统怎么改服务器地址,宏脉系统使用手册大全.doc

WORD资料下载可编辑专业资料分享目录TOC \o "1-3" \h \u HYPERLINK \l _Toc16722 第一章 通用功能键说明 PAGEREF _Toc16722 4HYPERLINK \l _Toc15100 1.1功能键的使用说明 PAGEREF _Toc15100 4HYPERLINK \l _Toc5198 1.2 打印设置 PAGEREF _Toc5198 8HYPERLINK \l _…

navicat for mysql 用户_Navicat for MySQL 怎么/怎么添加管理用户?Navicat for MySQL 添加管理用户教程_37游游网...

【37游游攻略】为了保证数据库的安全,对操作用户分级授权是非常有必要的,Navicat for MySQL 给我们提供了一个非常强悍又非常便捷的用户管理系统。点击位于连接右侧的用户命令,随之弹出管理用户的界面,Navicat for MySQL 系统默认…

ajax实现向上正在加载,向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)

/****desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码ajaxdata_url ajax异步的URL 如data.phppage_val_name ajax异步的URL中的页码参数名 如pagenopage_no 初始加载页码,默认1 [如2,则与前面两参数结合为…

js如何上传大文件到服务器,js将文件上传到远程服务器

js将文件上传到远程服务器 内容精选换一换将文件上传至Windows云服务器一般会采用MSTSC远程桌面连接的方式。本节为您介绍本地Windows计算机通过远程桌面连接,上传文件至Windows云服务器的操作方法。Windows云服务器可以访问公网。在本地Windows计算机上&#xff0c…

centos odbc mysql_Centos下安装并配置ODBC连接MySQL 【转】

找到一篇英文的关于Linux下ODBC的安装和配置,在此根据自己的需要截取部分记录一下。安装并配置ODBCODBC连接器是一个数据库抽象层,它可以让Asterisk与广泛的数据库进行通信,而无需开发人员为Asterisk需要的每一个数据库创建一个单独的数据库连…

增强服务器安全性能,加强Linux服务器安全的20项建议

很多人都说 Linux 在默认配置下很安全,我在一定程度上同意这个说法(很值得商榷的话题)。不过 Linux 内置的安全模型和工具做得确实很到位,用户只需进行简单的调整和自定义就可以加强 Linux 服务器安全。与恶意用户做斗争对于所有 Linux 系统管理员来说都…

mysql禁用历史命令_如何禁止mysql记录历史命令

如何禁止mysql记录历史命令?在执行 SQL命令时,mysql会将历史命令记录到~/.mysql_history文件中,因此我们用上下键就可以翻阅历史命令了。也许某些特殊需要我们可能需要不让它记录这些历史命令,我们可以这样作:[rootTes…

阴阳师师徒系统不同服务器,阴阳师体服师徒系统未收录改为随机SSR

昨天下午,受到很多争议的体服“师徒系统”更新啦!新版的“师徒系统”修改了徒弟的条件,总的来说能剔除压级大佬,并且之前奖励未收录SSR降低为随机SSR式神,难怪很多阴阳师都说:“大快人心!”的确…

Mysql union联合查询_Mysql联合查询union和union all的使用介绍

一、UNION和UNION ALL的作用和语法UNION 用于合并两个或多个 SELECT 语句的结果集,并消去表中任何重复行。UNION 内部的 SELECT 语句必须拥有相同数量的列,列也必须拥有相似的数据类型。同时,每条 SELECT 语句中的列的顺序必须相同.SQL UNION…

ios 查看同文件名_实战恢复cisco 2950交换机的IOS

本来想用两台思科交换机做实验的,可是通过console口进入其中一台交换机后却发现这个台交换机的IOS文件丢失了。本来正常进入交换机后应该是首先进入到用户模式的,而且提示符应该是“>”,而现在提示符却成了“:”,如…

repositoryitemlookupedit根据每行的id绑定数据_一种根据数据库自增ID生成唯一ID的解决方案...

在我们的开发过程中,经常会遇到ID生成的问题,那么这里就介绍一种解决方案,注意这里只适合混淆ID规则,也就是说生成的ID没有任何规则,不适用于订单ID。一般有序自增主键的ID,极易被爬虫抓取数据,…

bootstracp实现树形列表_Java实现一致性哈希算法,并搭建环境测试其负载均衡特性...

实现负载均衡是后端领域一个重要的话题,一致性哈希算法是实现服务器负载均衡的方法之一,你很可能已在一些远程服务框架中使用过它。下面我们尝试一下自己实现一致性哈希算法。一. 简述一致性哈希算法这里不详细介绍一致性哈希算法的起源了,网…

c# mysql数据库查询语句_C# mysql 查询

展开全部|mysql> select * from test_book1;-------------------------------------------------|e68a84e8a2ad3231313335323631343130323136353331333335303534 id | name | data |-------------------------------------------------| …

系统分析师和系统架构设计师难度比较_系统架构设计师,马上开课了!

一年只考一次的系统架构设计师7月7日通关指南开课系统架构设计师考试,是2009年11月计算机资格考试新增专业,这个级别属于高级资格考试。与该考试同级别的还有系统分析师、信息系统项目管理师、系统规划与管理师以及网络规划设计师。系统架构设计师每年考…

运维人员mysql如何访问_mysql 运维常见操作

MySQL密码的恢复方法之一1.首先确认服务器出于安全的状态,也就是没有人能够任意地连接MySQL数据库。 因为在重新设置MySQL的root密码的期间,MySQL数据库完全出于没有密码保护的 状态下,其他的用户也可以任意地登录和修改MySQL的信…

mocha 测试 mysql_node项目mocha自动化测试的疑问

测试框架:mocha数据库:mysql和mongodb疑问1. 如何控制多个测试用例的运行顺序?用例写多了,A用例把数据变成了状态1,有些后面的用例基于这个状态1的数据进行查询判断,才能使得后面的用例正常运行&#xff0c…

pythonhelloworld实例_Python基于Tkinter的HelloWorld入门实例

本文实例讲述了Python基于Tkinter的HelloWorld入门实例。分享给大家供大家参考。具体分析如下:初学Python,打算做几个Tkinter的应用来提高。刚学的HelloWorld,秀一下。我用Python3.2的,Windows版本的。源代码如下: #导…