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 ...
随机推荐
- 消息队列MQ面试专题（rabbitmq）
正文: 1.什么是 rabbitmq 采用 AMQP 高级消息队列协议的一种消息队列技术,最大的特点就是消费并不需要确保提供方存在,实现了服务之间的高度解耦 2.为什么要使用 rabbitmq 在分布 ...
- Centos-yum软件包安装-yum
yum 自动安装相关软件依赖,可以同时配置多个yum源,初始启动yum时候首先会缓存资源包到 /var/cache/yum目录下 yum确认 -y yum安装和卸载 install 安装,自动安装软件 ...
- Python-joypy和 R-ggridges 峰峦图制作
本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 以下文章来源于DataCharm,作者 宁海涛 转载地址 https://www ...
- 094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 02 static关键字 04 static关键字（续）
094 01 Android 零基础入门 02 Java面向对象 02 Java封装 01 封装的实现 03 # 088 01 Android 零基础入门 02 Java面向对象 02 Java封装 ...
- Unicode和多字节字符集
今天自己写的发现一个输出路径程序使用unicode字符集只能输出单个的首字符,问了一下同事,改为使用多字节字符集,问题解决了 于是上网看了他们的区别: 很多没看完,但起码了解到字符集的演变过程, 转 ...
- 二进制搭建kubernetes-1.18.6单master集群
master组件 kube-apiserver kubernetes API集群的同一入口,各组件协调者,以RESTful API提供接口服务,所有对象资源的增删改查和监听操作都交给APIserver ...
- 实验报告系列：实验一 HTML语言的简单网页制作
实验一 HTML语言的简单网页制作 一.实验目的: 1．掌握常用的HTML语言标记: 2．利用文本编辑器建立HTML文档,制作简单网页. 3．学习将其它格式的文档转换成HTML格式的文档 二.实验内容 ...
- 使用Python学习win32库进行内存读写
前言: 上一周,在52的精华帖中,看到有位大佬用Python制作了鬼泣5的修改器,看完才知道,原来Python也可以对内存进行操作,出于对技术的好奇,看完以后,决定自己也尝试一下. 要用到的工具: C ...
- Mysql架构与内部模块-第一章
Mysql作为大多数中小型企业的首选数据库,也可能是众多同僚接触的第一个数据库,其热门程度不言而喻,一些相对基础的知识本系列不做赘述,主要简述Mysql相关的进阶知识. 本章将由浅入深的讲解从连接My ...
- 基于SpringAop的鉴权功能
什么是 AOP 首先我们先了解一下什么是AOP,AOP(Aspect Orient Programming),直译过来就是面向切面编程.AOP是一种编程思想,是面向对象编程(OOP)的一种补充.面向对 ...