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 ...
随机推荐
- 智慧组织（SO）如何敏捷构建？
人类社会正处于千年未有之变局的关键时刻--互联网.大数据.AI和实体经济深度融合,数据正在重新定义世界并重构财富体系."新旧交织.破立并存",数字经济方兴未艾,传统势力逐步淡出.各 ...
- 你可能不知道的 Date 类
Date 是 JS 中的重要的一个内置对象,其实例主要用于处理时间和日期,其时间基于 1970-1-1 (世界标准时间)起的毫秒数,时间戳长度为 13 位(不同于 Unix 时间戳的长度 10 位). ...
- Centos-进程运行状态-ps
ps 显示系统进程在瞬间的运行状态 相关选项 -a 显示所有用户的进程,包含每个程序的完整路径 -x 显示所有系统程序,包括那些没有终端的程序 -u 显示使用者的名称和起始时间 -f 详细显示程序执 ...
- centos7安装YouCompleteMe，vim打造成C++的IDE
一.安装python3 1.安装编译工具 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...
- 阿里云oss对象存储配置CDN
阿里云oss对象存储配置CDN 1.打开阿里云CDN 2.填写信息,这个地方要注意,我的备案域名是www.ljwXXX.work,我们可以自定义一个域名,test.ljwXXX.work作为加速域名. ...
- 设计模式PDF下载了4.0万本！那，再肝一本《Java面经手册》吧！
作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 1. 先祝贺下自己拿下4.0万本下载量! <重学Java设计模式>PDF ...
- 联赛模拟测试8 Dash Speed 线段树分治
题目描述 分析 对于测试点\(1\).\(2\),直接搜索即可 对于测试点\(3 \sim 6\),树退化成一条链,我们可以将其看成序列上的染色问题,用线段树维护颜色相同的最长序列 对于测试点\(7\ ...
- 多线程之ReentrantLock篇（五）
昨天有说过后面讲ReentrantLock,今天我们这篇幅就全局的讲解下,我们在Lock出来前,解决并发问题没得选只能用Synchronized. 一.ReentrantLock PK synchro ...
- 054 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 01 数组概述
054 01 Android 零基础入门 01 Java基础语法 06 Java一维数组 01 数组概述 本文知识点:数组概述 为什么要学习数组? 实际问题: 比如我们要对学生的成绩进行排序,一个班级 ...
- Python3——字典
Python 字典(Dictionary) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在 ...