技术标签: CSS3学习笔记 keyframes 动画 css3 animation
动画( animation)是CSS3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多变化,更多控制,连续自动插放等效果。
制作动画分为两步:
@keyframes animation{
0%{
...
}
100%{
...
}
}
页面一打开,一个DIV将从左移至右。
@keyframes move {
from {
transform: translateX(0px);
}
to {
transform: translateX(1400px);
}
}
div {
width: 100px;
height: 100px;
background-color: teal;
/* 调用动画 */
animation-name: move;
/* 持续时间 */
animation-duration: 3s;
}
@keyframes move {
0% {
transform: translateX(0px);
}
25% {
transform: translateX(1000px);
}
50% {
transform: translate(1000px, 500px);
}
75% {
transform: translate(0px, 500px);
}
100% {
transform: translate(0px, 0px);
}
}
div {
width: 100px;
height: 100px;
background-color: teal;
animation-name: move;
animation-duration: 3s;
}
效果:
属性 | 描述 |
---|---|
@keyframes | 规定动画 |
animation | 所有动画属性的简写属性,除了 animation-play-state属性 |
animation-name | 制定需要使用的动画( 必须的 ) |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒( 必须的 ) |
animation-timing-function | 规定动画的速度曲线,默认是"ease"”。 |
aniamtion-delay | 规定动画何时开始,默认是0. |
animation-iteration-count | 规定动画被播放的次数,默认是1,还有 infinite |
animation-direction | 规定动画是否在下一周期逆向播放,默认是" normal" alternate逆播放 |
animation-play-state | 规定动画是否正在运行或暂停。默认是" running" 还有’ paused 暂停. |
animation-fill-mode | 规定动画结束后状态,保持 forwards 回到起始 backwards |
动画是否逆向播放
动画结束后状态
animation-timing- function:规定动画的速度曲线,默认是 ease、
值 | 描述 |
---|---|
linear | 动画从头到尾的速度是相同的。匀速 |
ease | 默认。动画以低東开始,然后加快,在结束前变慢。 |
ease-in | 动画以低速开始。 |
ease-out | 动画以低速结束。 |
ease-in-out | 动画以低速开始和结束。 |
steps | 指定了时间函数中的间隔数量(步长) |
steps 理解为动画从头到尾,需要多少步来完成。
示例:
div {
width: 0;
height: 30px;
background-color: teal;
/* animation: move 4s linear forwards; */
/* steps 就是分几步来完成动画,有了 steps 不要写ease linear了 */
animation: move 4s steps(10) forwards;
}
@keyframes move {
0% {
}
100% {
width: 200px;
}
}
效果:
以此推断做一个打字机效果。
注意:1ch 等于一个 0 的宽度!宽度!宽度!
ch还有另一个规则:
<style>
div {
font-size: 46px;
font-family: monospace;
/* 1ch 代表0的宽度 */
width: 0ch;
white-space: nowrap;
/* animation: move 4s linear forwards; */
/* steps 就是分几步来完成动画,有了 steps 不要写ease linear了 */
animation: move 4s steps(9) forwards;
overflow: hidden;
}
@keyframes move {
0% {
}
100% {
width: 18ch;
}
}
</style>
<div>我不知道你在想什么</div>
效果:
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状太;
示例:
animation:move 1s ease 2s 3 alertnate fowwards
@keyframes move {
from {
transform: translate(0, 0);
}
to {
transform: translate(1000px, 0);
}
}
div {
width: 100px;
height: 100px;
background-color: teal;
/* 动画名称 */
/* animation-name: move; */
/* 持续时间 */
/* animation-duration: 2s; */
/* 速度曲线 */
/* animation-timing-function: ease-in; */
/* 何时开始:延迟一秒 */
/* animation-delay: 1s; */
/* 重复次数 */
/* animation-iteration-count: 2; */
/* 是否逆向播放 */
/* animation-direction: alternate-reverse; */
/* 结束后状态 */
/* animation-fill-mode: forwards; */
animation: move 2s linear 0s infinite alternate forwards;
}
/* 鼠标经过暂停动画 */
div:hover{
animation-play-state: paused;
}
文章浏览阅读325次。插头DP小结_dp插头模型
文章浏览阅读3.5k次。关于测试工作效率低的一些思考和改进方法引子 汇总统计了一下项目组近期测试项目实际工作量与基线工作量的对比,发现一个严重问题。就是工作效率特别低下。下面简单列举一下几个项目预期工作量和实际工作量以及时间耗费严重的地方、项目简要背景。 1、B版本测试。版本预期工作量15人天,实际耗费工作量在30人天。更为严重的是测试人员并没有因为测试周期延长和工作量投入加大而测试的更轻松,反而是测试期..._测试人员不足与改进
文章浏览阅读173次。级联样式表 CSS-难以成熟 (CSS — Difficult to maturation)Unlike software, the CSS specifications are developed by successive versions, which would allow a browser to refer to a particular version. CSS was devel..._级联样式表是哪年产生的
文章浏览阅读1.7k次。目录批处理语句1、批处理语句简介示例一:示例二:存储过程一、什么是存储过程1、存储过程的简介2、存储过程包含的内容3、存储过程的优点4、存储过程的分类系统存储过程:用户定义存储过程5、常用的系统储存过程(1)一般常用的存储过程(2)xp_cmdshell二、创建存储过程1、定义存储过程的语法2、不带参数的存储过程3、带参数..._sql的批处理
上次,我们解除了css的内外边距、鼠标悬停及其练习。现在我们学习css元素练习和定位。
文章浏览阅读2.2k次,点赞4次,收藏6次。本文提出了 WU-UCT, 一种新颖的并行 MCTS 算法, 通过监控未观察样本的数量来解决并行化过程中统计数据过时的问题. 基于新设计的统计数据, 它有正确地修正了UCT节点选择策略, 实现了有效的探索和利用的权衡. _树搜索并行化
文章浏览阅读32次。springboot基于springboot的小型超市库存管理系统。springboot基于SpringBoot的校园失物招领系统。springboot基于springboot的残障人士社交平台。springboot基于springboot的酒店管理系统。springboot基于springboot的电商购物系统。springboot基于微信小程序的Sunmoon口红商城。springboot基于云平台的便民物流速递信息管理系统。springboot基于微服务的固定资产管理系统。
文章浏览阅读3.1k次。还在用PPT、Word和Excel画企业组织结构图吗?对于人力资源的同事来说,画组织结构图是一键非常头疼的事情,尤其是对于一些大公司和人员变动较大的公司来说,需要经常更换组织结构图,每次变动都要耗费大量的时间和精力去重新绘图。其实绘制织结构图很简单,之所以难是因为没有找对工具和方法!今天小编就教你如何用亿图图示轻松绘制一个既美观又专业的组织结构图!下图是一个简单的组织结构图例子,小编就以此为例,详细讲解一下好看清晰、实用的公司组织结构图是怎么画出来的。1、新建组织结构图2、创建组织结构_书本里印刷的结构图是用什么软件做的
文章浏览阅读1.8k次,点赞4次,收藏5次。BLE5.0 扩展蓝牙名称长度_蓝牙广播名称过长
文章浏览阅读3.5k次。centos8安装NVIDIA显卡驱动,docker模式运行机器学习_centos8安装显卡驱动
文章浏览阅读2.4k次。需求变更这件事,每个开发人员都遇到过,每个产品经理也都遇到过。 以前,我们会追求需求不变更,但无论是产品型团队还是项目型团队,需求不变更都是天方夜谈,不可能实现的。即使把需求变更的成本提得很高,流程搞得很复杂,又要填变更单,又要几级经理审批,又要需求评审,依然无法避免。 于是,团队的目标变成了少变更,希望尽量少的变更既能满足业务的需要,又能减少开发团队的反感。但‘少’是个相对的概念_需求优先级反复变化
文章浏览阅读2.3k次。一,素数筛法如果需要用到素数表,要么硬编码,要么自己求出前若干项素数。硬编码适合小表,大表只能自己求,而最常见的就是筛法。_筛法求素数