css3动画简单应用
CSS3添加了几个动画效果的属性,通过设置这些属性,可以做出一些简单的动画效果而不需要再去借助JavaScript。CSS3动画的属性主要分为三类:transform、transition以及animation。 1. transform rotate
设置元素顺时针旋转的角度,用法是:
transform: rotate(x);
参数x必须是以deg结尾的角度数或0,可为负数表示反向。 scale
设置元素放大或缩小的倍数,用法包括:
transform: scale(a); 元素x和y方向均缩放a倍
transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍
transform: scaleX(a); 元素x方向缩放a倍,y方向不变
transform: scaleY(b); 元素y方向缩放b倍,x方向不变 translate
设置元素的位移,用法为:
transform: translate(a, b); 元素x方向位移a,y方向位移b
transform: translateX(a); 元素x方向位移a,y方向不变
transform: translateY(b); 元素y方向位移b,x方向不变 skew
设置元素倾斜的角度,用法包括:
transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b
transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变
transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变
以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。 matrix
设置元素的变形矩阵,因为矩阵变形过于复杂,暂略。 origin
设置元素的悬挂点,用法包括:
transform-origin: a b; 元素的悬挂点为(a, b)
元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。 2. transition transition-property
指定transition效果作用的CSS属性,其值是CSS属性名。 transition-duration
动画效果持续的时间,其值为以s结尾的秒数。 transition-timing-function
指定元素状态的变化速率函数,其取值基于贝赛尔曲线函数,详情如下所示: transition-delay
动画效果推迟开始执行的时间,其值为以s结尾的秒数。
CSS3动画的生命周期如下图所示,从中可以清楚的看出duration和delay之间的关系: 3. animation CSS3中真正的动画属性是animation,而前面的transform和transition都只是对DOM元素的变形或者是状态的过渡。实际上,CSS3所支持的动画效果只是填充动画,也就是说先设定整个动画生命周期中的几个关键状态(key frame,关键帧),然后动画将自行计算并模拟关键帧之间的过渡。那么在设置animation的属性之前就必须先设定好关键帧了。
关键帧@keyframes的语法结构如下: @keyframesNAME {
a% {
/*CSS属性*/
}
b% {
/*CSS属性*/
}
...
}
NAME表示动画的名字;a%、b%表示以百分号结尾的百分数,用于设定该关键帧在动画生命周期中的位置;百分数后面的{ } 中则需要写成该关键帧状态下CSS属性的值。另外,如果同一个百分数值在@keyframes中出现多次,那么后出现的将覆盖先出现的;并且关键帧在@keyframes中时无序的。
设置完关键帧后就可以继续设定animation了。 animation-name
指定选用的动画的名字,即keyframes中的NAME。
animation-duration
同transition-duration。
animation-timing-function
同transition-timing-function。
animation-delay
同transition-delay。
animation-iteration-count
设定动画执行的次数,其值可以是数字也可以是infinite(循环执行)。
animation-direction
设定动画执行的方向,其值可以是normal(正常顺序播放)或alternate(反向播放)。
欢迎扫描下方二维码,加入群聊,互相交流学习!
PS:欢迎扫描下方二维码或点击链接,加入QQ群
css3动画简单应用的更多相关文章
- css3动画简单案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Css3动画效果,彩色文字效果,超简单的loveHeart
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Cs ...
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
- SASS使用CSS3动画并使动画暂停和停止在最后一帧的简单例子
今天在手机上试了试这个 css3 动画效果,可以把动画效果停留在最后一帧上,以及鼠标 :hover 暂停动画,比较实用的功能,不用 JS 也能实现这些效果了. 不过测试体验感觉手机上没有 jQuery ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- 深入探究jvm之类装载器
一.class装载验证流程 1.加载 1).取得类的二进制流. 2).转为方法区数据结构. 3).在Java堆中生成对应的java.lang.Class对象. 2.链接--验证(目的:保证Class流 ...
- 关于PHP如何用实现防止用户在浏览器上使用后退功能重复提交输入
$(function(){ if(window.history && window.history.pushState){ $(window).on('popstate',functi ...
- ubuntu linux常用指令(1)
序号 命令 说明 1 sudo su 从普通用户切换到root用户 2 su user 从root用户切换到普通用户 3 ls 列出当前目录的文件和目录,但是不包括隐藏文件和目录 4 ls -a 列出 ...
- 高德地图-android 权限设置
转自http://blog.csdn.NET/eyu8874521/article/details/8481953 一个Android应用程序需要权限才能调用某些android系统的功能:一个andr ...
- Git 将本地代码推到 Coding 远程仓库
1 首先创建文件夹,将要推的项目文件夹拷贝过来,进入文件夹 右键 Git Bash Here 输入以下代码 把这个目录变成git管理的仓库 git init 2 把文件添加到版本库中,使用命令 git ...
- 【算法】2-sat问题【模板】
什么是2-sat问题 有n个布尔型变量xi,另外m个需要满足的条件.每个条件都是“xi为真/假或者xj为真/假”.这句话中的“或者”意味着两个条件中至少有一个正确.2-sat问题的目标是给每个变量赋值 ...
- kalman处理realsense数据
代码来自:https://www.cnblogs.com/zjuhjm/archive/2012/12/29/2838472.html import numpy as npimport matplot ...
- HTTP协议简析(二)
HTTP响应也包含四部分内容: 响应行: 协议版本:HTTP/1.1 状态码:200 状态描述:对状态码的说明 响应头:用来规范数据,常用的有: server:服务器信息 date:响应的时间 las ...
- SqlServer 分区视图实现水平分表
我们都知道在数据库数据量较多的时候,可数据进行水平扩展,如分库,分区,分表(也叫分区)等.对于分表的一个方案,就是使用分区视图实现. 分区视图允许将大型表中的数据拆分成较小的成员表.根据其中一列中的数 ...
- redis缓存分页思路
传统分页一般分页做缓存都是直接查找出来,按页放到缓存里,但是这种缓存方式有很多缺点.如缓存不能及时更新,一旦数据有变化,所有的之前的分页缓存都失效了.比如像微博这样的场景,微博下面现在有一个顶次数的排 ...