CSS动画之动画模块
过渡模块和动画模块的区别：过渡动画需要人为的去触发这个反应，而动画模块不需要人为
相同点：都是动画；都是系统新增的属性；都是要满足三要素才有动画效果
三要素：1.告诉系统执行哪个动画，要写出动画名称；animation-name:名称;
2.告诉系统我们需要创建一个名称的动画； @keyframes 名称 {
from{
}
to{
}
}
3.告诉系统动画持续时长; animation-duration:动画持续时间;
其他属性：动画运动的速度：animation-timing-function：（linear-线性...）；
动画延迟多少秒执行：animation-delay：秒数；
动画执行次数：animation-iteration-count：次数；
动画是否轮流反向播放：animation-direction：alternate（轮流反向播放）normal（正常播放，默认取值）；
控制动画的发生和静止：animation-play-state：running（动画正在播放，默认取值）paused（动画静止）；
注意点：第二种方式制作动画不用from-to用百分比，好处可以设置任意多的节点
0%{
}
50%{
}
100%{
}
动画是有一定的状态的：1.等待状态；2.执行状态；3.结束状态；
animation-fill-mode（动画等待和结束状态的样式）：none（不做任何改变）
backwards（动画第一帧的状态）
forwards（动画最后一帧的状态）
both(动画从第一帧的样式开始最后停留在最后一帧)
动画模块的连写：animation：动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画模块</title>
<style>
@keyframes { }
div{
animation-duration: ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
CSS动画之动画模块的更多相关文章
- CSS学习笔记-动画模块
动画模块: 1.过渡和动画之间的异同 1.1不同点 (1)过渡必须人为触发才能执行 (2)动画不需要人为触发就可以执行 1 ...
- css变换与动画详解
举个栗子:--------元素整体居中.box{ position:absolute;top:50%;left:50%; width:50px; height:50px; t ...
- CSS篇之动画（2）
animation-name(自定义动画) name为动画名称.不要用中文,尽量用与动画相关的名称.元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义 ...
- 为网格布局图片打造的超炫 CSS 加载动画
今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...
- 一个纯CSS DIV天气动画图标【转扒的】
<p> </p> <style><!-- /* SUNNY */ .sunny { -webkit-animation: sunny 15s linear i ...
- CSS图片翻转动画技术详解
因为不断有人问我,现在我补充一下:IE是支持这种技术的!尽管会很麻烦.需要做的是旋转front和back元素,而不是旋转整个容器元素.如果你使用的是最新版的IE,可以忽略这一节.IE10+是支持的,I ...
- JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能
摘要: 理解浏览器渲染. 原文:JavaScript是如何工作的: CSS 和 JS 动画底层原理及如何优化它们的性能 作者:前端小智 Fundebug经授权转载,版权归原作者所有. 这是专门探索 J ...
- 简单的CSS圆形缩放动画
简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...
- CSS属性组-动画、转换、渐变
一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...
随机推荐
- 进程管理、PS命令、nohup命令
1. Windows 下,扩展名为exe的文件,鼠标双击,运行,把这个程序正在运行的实例,称之为进程 Windows进程的信息可以通过 任务管理器看到 查看到:正在运行的计算器程序 Calculato ...
- Tomcat学习小记（一）
1.Tomcat概述 Tomcat 服务器是一个开源的轻量级Web应用服务器,擅长处理动态资源,在中小型系统和并发量小的场合下被普遍使用,是开发和调试Servlet.JSP 程序的首选. Tomcat ...
- Redis小记（三）
1.复制 通过slaveof命令或设置slaveof选项,实现一个服务器去复制另一个服务器,被复制的是主服务器,执行复制的是从服务器,复制过程中主从双方数据库保持数据一致 2.8版本以前,可分为初次复 ...
- 开源 C#工作流管理平台
{ font-family: 宋体; panose-1: 2 1 6 0 3 1 1 1 1 1 } @font-face { font-family: "Cambria Math" ...
- 灵感来袭，基于Redis的分布式延迟队列（续）
背景 上一篇(灵感来袭,基于Redis的分布式延迟队列)讲述了基于Java DelayQueue和Redis实现了分布式延迟队列,这种方案实现比较简单,应用于延迟小,消息量不大的场景是没问题的,毕竟J ...
- Linux系统编程—信号集操作函数
先来回顾一下未决信号集是怎么回事. 信号从产生到抵达目的地,叫作信号递达.而信号从产生到递达的中间状态,叫作信号的未决状态.产生未决状态的原因有可能是信号受到阻塞了,也就是信号屏蔽字(或称阻塞信号集, ...
- Arduino - 串口操作函数与示例代码大全
来源:https://blog.csdn.net/iracer/article/details/50334041 Arduino - 串口操作函数与示例代码大全 本文总结了Arduino常用串口操作函 ...
- C++中头文件简介（stdio.h & chrono）
参考: 1. https://baike.baidu.com/item/stdio.h 2. https://www.cnblogs.com/jwk000/p/3560086.html 1. stdi ...
- VSCode搭建golang环境
安装对应版本的Golang 略 VSCode安装对应 Go 插件 在应用商店安装即可:go VSCode安装 Go 工具: 在VSCode输入:Crtl + Shift + P 在弹出框输入:inst ...
- 1.入门篇十分钟了解Spring Cloud
文章目录 Spring Cloud入门系列汇总 为什么需要学习Spring Cloud 什么是Spring Cloud 设计目标与优缺点 设计目标 优缺点 Spring Cloud发展前景 整体架构 ...