CSS中animation动画-详解
1、animation有什么组成?
Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作
2、关键帧应该怎么表示?
0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。
滑动案例:
图片展示:
3、基础知识
1、animation-name :xx (设置关键帧的名称为xx)
2、animation-duration:5s (动画持续时间为5s)
3、animation-timing-function: linear (动画时间曲线 也叫做运行速度为匀速)
取值:
linear 匀速、 ease (默认)低速开始—>加速—>结束前减速 、
ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
4、animation-delay:5s (动画等待5后开始)
5、animatiom-iteration-count:1 (动画播放次数为1次)
取值:xx数字,定义应该播放xx次动画、 infinite-无限次执行
6、animation-direction: alternate(设置动画为反向播放 )
取值:
- nomal(默认)-执行完一次之后回到起点继续执行下一次
alternate-往返动画,执行完一次之后往回执行下一次
reverse-反向执行
7、animation-fill-mode: (动画结束的最后一帧)
取值:
- none-不做任何改变
forwards-让元素结束状态保持动画最后一帧的样式
backwards-让元素等待状态的时候显示动画第一帧的样式
both-等待状态显示第一帧,结束状态保持最后一帧
8、animation-play-state: (设置动画是否暂停)
取值:running-执行动画 、paused-暂停动画
4、animation 简写
animation:动画名称 动画时长 动画运动速度 延迟时间 执行次数 往返动画
animation:动画名称 动画时长 (有这两个即可以完成动画,其它未设置,有默认值)
5、关键帧的书写
第一种from to
@keyframes swipe {/* 开始 */from {css样式}to {css样式}}
第二种:百分比
@keyframes LeftToRight {0% {css样式}50% {css样式}100% {css样式}} 可以分多段
6、简单的滑动案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 100px;height: 100px;background-color: red;/*动画配置 *//* 1、设置动画名称 */animation-name: LeftToRight;/* 2、动画持续时间 */animation-duration: 2s;/* 3、动画执行速度 */animation-timing-function: linear;/* 4、等待时长 *//* animation-delay: 2s; *//* 5、设置动画播放次数 */animation-iteration-count: infinite;/* 6、设置动画是否反向播放 */animation-direction: alternate;/* 7、动画结束时应用最后一帧 */animation-fill-mode: forwards;/* animation: name duration timing-function delay iteration-count direction fill-mode; */}/* 动画关键帧 */div:hover {/* 设置动画是否暂停*/animation-play-state: paused;}@keyframes LeftToRight {0% {margin-left: 0px;}25% {margin-left: 200px;}50% {margin-left: 300px;}75% {margin-left: 500px;}100% {margin-left: 1000px;}}</style></head><body><div></div></body></html>
CSS中animation动画-详解相关推荐
- 第100天:CSS3中animation动画详解
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: 一.Animation定义动画 CSS3的Animation是由"keyframes& ...
- 超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
- [转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
- Android Animation动画详解(二): 组合动画特效
前言 上一篇博客Android Animation动画详解(一): 补间动画 我已经为大家介绍了Android补间动画的四种形式,相信读过该博客的兄弟们一起都了解了.如果你还不了解,那点链接过去研读一 ...
- css中table标签详解(一)
css中table标签详解(一) 什么是table标签,以及table标签的组成? 不叨叨,直接上代码 <table><tr><td></td>< ...
- CSS中line-height属性详解(CSS之四)
CSS中line-height属性详解 基本概念 line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 图中两行基线之间的距离就是行高,基线相关可以查看CSS ...
- DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)
css中cursor属性详解-鼠标移到图片变换鼠标形状 语法: cursor : auto | all-scroll | col-resize| crosshair | default | hand ...
- SVG SMIL animation动画详解
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
- SVG SMIL animation动画详解----转载
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
- 让SVG 自己动起来!SMIL animation动画详解
今天一起来了解一下,怎么在不靠其它套件的状况下,单纯的制作SVG动画. 资料来源: https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-s ...
最新文章
- vscode提交代码
- 【RocketMQ】【分布式事务】使用RocketMQ实现分布式事务
- Fibonacci Again
- ASP怎样定义应用主题服务器,ASP.NET 4权威指南 目录
- vue-cli 3.0配置webpack目录别名alias
- 高效解析xml的总结,闲下来写的
- 回车键提交与不提交表单的解决方法
- (2)ionic2--初体验
- (C#基础) byte[] 之初始化, 赋值,转换。
- 母版页与用户控件区别(思维导图整理)
- 设计模式之(Composite)组合模式
- jquery audio在微信或者客户端需要点击两次才能正常播放的问题解决方案
- astrolog32 java,astrolog32 占星软件
- 梯度消失和爆炸原因以及解决方法
- Table里td中的文本过长,设置不换行,随内容同行显示
- 关于未来人工智能时代的一点感想
- 机器翻译评价指标之BLEU原理介绍及代码实现
- POJO与Bean的区别
- iPhone 开发中心 论坛 与 视频
- TMS320c6713的Flash引导装载系统设计
热门文章
- Excel显示公式栏/编辑栏
- android 11.0 12.0SystemUI 状态栏下拉快捷添加截图快捷开关
- 岗位、职位、职级、职务的区别
- android输入法横向,Android 手机拼音输入法横向全评
- js-实现数组翻转(倒序)
- 伊甸园日历游戏(vijos--1004)
- 中国平安会不会成为美国的世通或者安然?
- java判断闰年中闰月_2019年农历闰几月 关于闰年闰月的认识
- 如何防范动态调试(Anti-Debug)(SoftICE篇)
- 大大学校园计算机市场分析,笔记本电脑大学生市场调研报告