技术标签: 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;
}
文章浏览阅读3k次,点赞51次,收藏41次。熟悉这些机器人的常见格式,对于创建和操作机器人是至关重要的_sdf和urdf
文章浏览阅读745次。一、软件工程中的设计数据设计或类设计将类模型转化为设计类的实现以及软件实现所要求的数据结构。体系结构设计定义了软件的主要结构化元素之间的关系、可满足系统需求的体系结构风格和模式以及影响体系结构实现方式的约束。接口设计描述了软件和协作系统之间、软件和使用人员之间如何通信。构件级设计将软件体系结构的结构化元素变换为对软件的过程性描述。二、软件质量指导原则和属性软件质量指导原则..._设计概念功能独立
文章浏览阅读6.8k次,点赞10次,收藏65次。文章目录一、打开软件1.1 打开kettle1.2 打开SQL Server1.3 打开navicat1.3.1 navicat连接sqlserver准备sql server数据表(dept)准备sql server数据表(emp)1.3.2 navicat连接mysql1.4 可能出现的bug问题Error connecting to database: (using class org.gjt.mm.mysql.Driver)Error connecting to database: (using c._kettle任务调度
文章浏览阅读1.4w次,点赞5次,收藏19次。http://www.gad.qq.com/article/detail/32503以代码托管平台起家的 GitHub 网站,已然成为全球程序员工作和生活中不可或缺的一份子。从优秀的企业,到优秀的程序员,都将自己最优秀的代码作品存放在这片开源净土里,供彼此学习交流。GitHub Trending 栏目甚至已经成为 IT 从业人员的新闻日报,每日必读。既然 GitHu_github与gitpod的插件
文章浏览阅读1.1k次。根据VCD文件的type,PTPX支持instantaneous peak power analysis和cycle_accurate peakpower analysis。Time-Based Power Analysis支持的VCD type 由于Gate_level和zero_delay的VCD不支持event propa..._ptpx time
文章浏览阅读79次。VisualSVN安装教程、、、-----------------------------------参考网址:https://www.visualsvn.com/server/download/安装参考网址:http://www.jb51.net/article/71815.htm----------------------------------------------..._安装visualsvn
文章浏览阅读645次。程序员使用的语言有鄙视链吗?有人说有,有人说没有。一个美团员工发帖说,筛选简历时用go语言的基本不看。短短一句话,把对go语言的鄙视体现得淋漓尽致,难道go语言真的不如其他语言?和他一..._go语言的鄙视链
文章浏览阅读5.3k次。在本文中,我将解释如何将ink与Unity项目集成,以及如何使用ink API与我们的小说网站源码系统进行交互。在我们开始之前,请确保您有一个包含一些对话和选择的墨水文件。您可能想下载并使用我准备的示例故事。这实际上是来自Guilt Free的简化场景,通过分享这一点,我想向您展示一个真实的视觉小说系统源码示例和实际代码的技术。完整源码:xsymz.icu项目设置继续在 Unity 中创建一个新的 2D 项目。然后添加您可以在此处找到的墨水插件。在ink插件文件夹(Plugins/Ink)里会有一_小说网站源码
文章浏览阅读531次。参考API Design Guidelineshttps://swift.org/documentation/api-design-guidelines/swift-style-guidehttps://github.com/raywenderlich/swift-style-guide项目命名规范一、工程文件夹、文件目录结构【业务模块】1、文件夹采用下划线命名,名字全部小写下划线间隔,如module_login2、文件、类、结构体、枚举、协议采用大驼峰命名,每个单词首字母大写,如 MyCu_swift 正则判断文件类型
文章浏览阅读2.2w次。1、return命令会使得一个函数返回.return命令会返回一个单一的数字参数, 而这个数字参数在调用这个函数的脚本中是可见的.如果没有指定返回参数,return在默认情况下会返回上一次命令的返回代码。2、了解一个概念:return value ﹗我们在 shell 下跑的每一个 command 或 function ,在结束的时候都会传回父行程一个值,称为 return value 。在 shell command line 中可用 $? 这个变量得到最"新"的一个 return value_shell return
文章浏览阅读834次。本系列文章主要写我在阅读Linux内核过程中,关注的比较难以理解但又设计巧妙的代码片段(不关注OS的各个模块的设计思想,此部分我准备写在“深入理解Linux Kernel”系列文章中),一来通过内核代码复习一下C语言及汇编语言的语法,二来学习内核开发大牛们书写代码的风格及思路。理解了上面之后,再来看看第二个BUILD_BUG_ON_NULL(e)宏,与第一个类似,-------------------------------------完--------------------------------_build_bug_on_zero
文章浏览阅读678次。//调用单片机头文件#define uchar unsigned char //无符号字符型 宏定义 变量范围0~255#define uint unsigned int //无符号整型 宏定义 变量范围0~65535#include "eeprom52.h"#include "nongli.h"bit flag_2..._基于单片机的自动打铃控制系统设计提纲