从零开始学习前端开发 — 15、CSS3过渡、动画
一、css3过渡
语法: transition: 过渡属性 过渡时间 延迟时间 过渡方式;
1.过渡属性(transition-property)
取值:all 所有发生变化的css属性都添加过渡
eg: transition: all 1s;
ident 指定要过渡的css属性列表
eg: transition:border-radius 1s,background 2s;
none 没有属性发生过渡
注:我们可以省略滑过状态或其他状态的过渡属性,但是不能省略初始状态的transition属性
2.过渡时间(transition-duration)
取值:0 不过渡
time 设置一个正数,单位为s
eg: transition: all 1s;
3.延迟时间(transition-delay)
取值:
0 不延迟,过渡动画正常执行
正数 按照设置的时间延迟执行过渡动画
负数 设置时间前的动画将会被截断
4.过渡方式(transition-function)
取值:
ease 缓解效果,默认值
linear 匀速运动
ease-in 加速运动
ease-out 减速运动
ease-in-out 慢-快-慢
二、css3动画
语法: animation:动画名称 动画执行时间 动画延迟执行时间 动画播放次数 动画播放后的状态;
动画是由一帧一帧的关键帧组成的,在设置animation之前要先定义动画关键帧:
语法:
@keyframes 动画名称{
0%{
属性:属性值;
}
50%{
属性:属性值;
}
...
100%{
属性:属性值;
}
}
@keyframes 动画名称{
from{
属性:属性值;
}
...
to{
属性:属性值;
}
}
1.动画名称(animation-name)
eg: animation:ball 1s;
注:动画名称要与@keyframes中的动画名称一致
2.动画执行一次所需的时间(animation-duration)
取值:
time: 正数,单位为秒(s)或者毫秒(ms),默认为0,不执行动画
3.动画延迟执行的时间(animation-delay)
取值:
0: 默认值,不延迟
正数: 按照设置的时间延迟执行动画
负数: 设置时间前的动画将会被截断
4.设置动画的播放次数(animation-iteration-count)
取值:
number 可以设置为正整数
infinite 无限循环播放
5.设置对象动画的状态(animation-play-state)
取值:
running 默认值,运动
paused 动画暂停
6.设置动画的播放方式(animation-timing-function)
取值:
ease
linear 匀速运动
ease-in
ease-out
ease-in-out
step-start 马上转跳到动画的结束状态或马上转跳到下一帧,中间没有过渡
step-end 保持动画开始时的状态,直到动画执行结束,转跳到动画结束状态
steps(n,start|end)
n代表动画分几步完成
7.设置对象动画的运动方向(animation-direction)
取值:
normal 默认值,正常方向运动
reverse 与normal方向相反运动
alternate 奇数次正方向,偶数次反方向
alternate-reverse 奇数次反方向,偶数次正方向
8.设置对象动画时间之外的状态(animation-fill-mode)
取值:
none 默认值,不设置对象动画之外的状态
forwards 保持动画结束时的状态
backwards 保持动画开始时的状态
both 遵循forwards和backwards两个规则
三、CSS3 transition和animation的区别
1.transition动画执行需要出发条件,animation动画出发在页面加载完成后可以自动执行
2.transition触发一次执行一次,多次执行需要执行多次触发条件,animation可以无限循环播放,也可限制次数
3.transition只能设置开始和结束状态 不能设置中间的动态
扩展:隐藏变形元素的背面 backface-visibility:hidden;
从零开始学习前端开发 — 15、CSS3过渡、动画的更多相关文章
- 从零开始学习前端开发 — 17、CSS3背景与渐变
一.css3背景切割: background-clip:border-box|padding-box|content-box; 作用: 用来设置背景的可见区域 a) border-box 默认值,背景 ...
- 从零开始学习前端开发 — 11、CSS3选择器
一.基本选择器 1.* 通配符(通用选择器) 2.id选择器 3.class选择器(类选择器) 4.标签选择器(元素选择符) 5.群组选择器 (选择符1,选择符2{...}) 二.层次选择器(关系选择 ...
- 从零开始学习前端开发 — 16、CSS3圆角与阴影
一.css3圆角: border-radius:数值+单位; 1.设置一个值:border-radius:20px; 四个方向圆角都为20px(水平半径和垂直半径相等) 2.设置两个值 border- ...
- 从零开始学习前端开发 — 14、CSS3变形基础
一.css3变形: transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移); 注:当多种变形方式综合在一起时,用空格隔开 1.旋转 a) rotat ...
- 从零开始学习前端开发 — 12、CSS3弹性布局
一.分栏布局 1.设置栏数column-count:数值; 2.设置每栏的宽度column-width:数值+单位; 注:当设置了column-width,column-count会失效,二者设置其一 ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- 从零开始学习前端开发 — 18、BFC
一. BFC的概念 BFC--block formating context的缩写,中文译为"块级格式化上下文" 二.如何触发BFC 1.设置float除none以外的值(left ...
- 从零开始学习前端开发 — 10、HTML5新标签及表单控件属性和属性值
一.html5新增标签 1.结构性标签 header 定义网页的头部 nav 定义网页的导航 footer 定义网页的底部 section 定义网页的某个区域 article 定义网页中的一篇文章 a ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
随机推荐
- flex基础示例
flex的一些基础用法: <!-- Flex布局已经得到了所有浏览器的支持:chrome21+.Opera12.1+.Firefox22+.safari6.1+.IE10+ Webkit内核浏览 ...
- js基础:对DOM进行操作,删除、添加元素
<body> <div id="div1"> <p id="p1">第一段</p> <p id=" ...
- Ubuntu(Linux)下如何用源码文件安装软件
在Ubuntu中附带了丰富的软件,这些软件一般使用图形化的自动方式(“添加/删除”或“新立得”)即可轻松安装,但是对于那些刚刚问世的新软件,Ubuntu的源中还未收录其中,这时我们就需要用到一种更通用 ...
- 例子:js超级玛丽小游戏
韩顺平_轻松搞定网页设计(html+css+javascript)_第34讲_js超级玛丽小游戏_学习笔记_源代码图解_PPT文档整理 采用面向对象思想设计超级马里奥游戏人物(示意图) 怎么用通过按键 ...
- c#代码技巧
1.#region #endregion 1.#region 是一个分块预处理命令,主要用于编辑代码分段,在编译时会自动屏蔽,同时该指令可以使代码在VS代码编辑器中折叠或展开: 2.#region必须 ...
- leetcode — copy-list-with-random-pointer
import java.util.*; /** * * Source : https://oj.leetcode.com/problems/copy-list-with-random-pointer/ ...
- robotframework的学习笔记(十三)------Robot Framework常用库简介
标准库 Robot Framework可以直接导入使用的库,包括: Builtin:包含经常需要的关键字.自动导入无需import,因此总是可用的 Dialogs:提供了暂停测试执行和从用户的输入方式 ...
- Jenkins 学习笔记(一):我对 Jenkins 的宏观认识
Jenkins 是一个持续构建的系统,通过一周的了解熟悉,其逻辑似乎很简单. Jenkins 拓扑 Jenkins 逻辑 1. 从代码库拉取代码. 2. 处理代码. 对于需要编译的程序,需要进行处理, ...
- 基于MongoDb官方C#驱动封装MongoDbCsharpHelper类(CRUD类)
近期工作中有使用到 MongoDb作为日志持久化对象,需要实现对MongoDb的增.删.改.查,但由于MongoDb的版本比较新,是2.4以上版本的,网上已有的一些MongoDb Helper类都是基 ...
- Java框架之Spring MVC(一)
一.Spring简介 Spring MVC是当前最优秀的 MVC 框架,自从Spring 2.5 版本发布后,由于支持注解配置,易用性有了大幅度的提高.Spring 3.0 更加完善,实现了对 Str ...