CSS animate动画效果
1.CSS动画
由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作\
过渡和动画的异同:
不同点:
- 过渡必须要人为的触发才会执行
- 动画不需要认为的触发就可以触发执行页面
相同点:
- 过渡和动画都是用来给元素添加动画的
- 过渡和动画都是系统新增的一些属性
- 过渡和动画都需要满足三要素才会有动画效果(三要素见主页博客CSS Transition过渡)
2.Animate属性设置
- animation-name 指定要绑定到选择器的关键帧的名称,告诉系统需要执行哪个动画
通过@keyframes来设置动画序列,序列中每个关键帧描述动画元素在动画序列的特定时间内如何渲染。关键帧使用了一个百分比来表示在动画序列中出现的时间。0%表示动画的初始时间,也可以通过from关键字表示。100%表示动画的结束时间,也可以通过to关键字表示。
@keyframes animiationName{
keyframes-selector{
css-style;
}
}
- animation-duration 动画指定需要多少秒或毫秒完成,告诉系统动画持续的时长
time 指定动画播放完成花费的时间。默认值为 0,意味着没有动画效果。 - animation-timing-function 设置动画将如何完成一个周期,告诉系统动画执行的速度
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 - animation-delay 设置动画在启动前的延迟间隔
time可选。定义动画开始前等待的时间,以秒或毫秒计。默认值为0 - animation-iteration-count 定义动画的播放次数。告诉系统动画需要执行几次
n 一个数字,定义应该播放多少次动画
infinite 无限次执行 - animation-direction 指定是否应该轮流反向播放动画。
normal 默认的取值, 执行完一次之后回到起点继续执行下一次
alternate 往返动画, 执行完一次之后往回执行下一次
reverse 反向执行 - animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
none: 不做任何改变
forwards: 让元素结束状态保持动画最后一帧的样式
backwards: 让元素等待状态的时候显示动画第一帧的样式
both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式 - animation-play-state 告诉系统当前动画是否需要暂停
running: 执行动画
paused: 暂停动画 - 动画模块连写格式
animation:动画名称(animation-name) 动画时长(animation-duration) 动画运动速度(animation-timing-function) 延迟时间(animation-delay) 执行次数(animation-iteration-count) 往返动画(animation-direction); - 动画模块连写格式的简写
animation:动画名称 动画时长;
代码示例:
div{/* 设置动画名称 */animation-name: leftToRight;/* 设置动画持续时间 */animation-duration: 5s;/* 设置动画执行速度 */animation-timing-function: ease;/* 设置动画等待时长 */animation-delay: 2s;/* 设置动画播放次数:n和 infinite(无限次) */animation-iteration-count: 1;/* 设置动画是否反向播放 alternate反向播放 */animation-direction: alternate;/* 动画不播放或者等待时长应用的样式 *//* 动画结束时应用最后一帧 */animation-fill-mode: forwards;/* 简写形式 */animation: leftToRight 1s linear ;
}
/* 动画关键帧 */@keyframes leftToRight {/* 开始 中间过程 结束状态 */0% {margin-left: 0;}25% {margin-left: 150px;}50% {margin-left: 250px;}100% {margin-left: 350px;}}
CSS animate动画效果相关推荐
- jQuery animate动画效果
jQuery animate动画效果 1.animate动画效果 2.animate回调函数 3.参数为数学表达式形式 4.滑动选项卡 1.animate动画效果 <!DOCTYPE html& ...
- CSS animation动画效果实现精灵图、雪碧图动画,多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用 素材下载 分析图片动画过程 图片可以分成4*6=24 小图片也就是24帧 方法1 可以把每一行成一个动画,所以可以拆分4个动画 方 ...
- html弹跳动画效果,CSS弹跳动画效果的实现方法
这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我 ...
- php带旋转动画刷新页面,css旋转动画效果的简单实现示例详解
我们可以通过css来做出动画效果,下面我为大家演示的是p的旋转,颜色过渡的动画 a{ text-align:center; line-height:100px; transition:all 2s; ...
- Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <!--动画效果图 利用CSS3动画属性实现--><template><div><h2>动画效果 ...
- wow.js结合animate.css实现滚动页面触发animate动画效果
animate.css http://www.swiper.com.cn/ wow.js https://wowjs.uk/docs.html https://github.com/graingert ...
- 是谁,在敲打我窗-CSS雨滴动画效果
1.扯闲篇 是谁在敲打我窗 是谁在撩动琴弦 那一段被遗忘的时光 渐渐地回升出我心坎 是谁在敲打我窗 是谁在撩动琴弦 记忆中那欢乐的情景 慢慢地浮现在我的脑海 那缓缓飘落的小雨 不停地打在我 ...
- 前端CSS卡片动画效果的实现
先来看看具体效果图如下: HTML代码如下: <!DOCTYPE html> <html> <head><title>[每日一练]CSS产品卡片动画效果 ...
- 一文搞懂css 2D动画效果
文章目录 前言 一.过渡动画效果简述 transition: 1.代码示例 2.效果展示 二.定位translate 1.2D定位 transform: translate(50%, 50%); ①. ...
最新文章
- python做定时任务的方式及优缺点_python BlockingScheduler定时任务及其他方式的实现...
- tableau技术小积累
- R计算获取决策曲线数据(Decision Curve Analysis,DCA)并使用python进行可视化
- matlab白噪声模块,matlab白噪声实现
- cut命令详解(转)
- win7打不开qq文件怎么办
- markdown编辑器语法——字体、字号与颜色
- WPF中的动画——(三)时间线(TimeLine)
- 文件被损坏 java_使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误
- 排序,求最大值最小值
- *SQL Server系统表的应用
- 第12章 决策树 学习笔记中
- OpenGL(一)二维图形的绘制:一个简单的绘制矩形程序
- MATLAB 绘制折线图
- 练习4.4 萨提亚冰山理论应用
- 逻辑架构和物理架构在架构设计中的应用
- 深入Unreal蓝图开发:实现蓝图模板函数
- python连接数据库实现登录注册_python实现非数据库模式的用户注册和登录
- 我的spfa (= =)!
- java itext图片大小_java – iText:降低图像质量(减少生成的PDF大小)
热门文章
- 强大的数字DJ混音器:Native Instruments Traktor pro for mac
- 来自2.5年前端小白的总结
- 大厂内卷:蚂蚁集团员工关怀再次升级。测试要如何才能进入大厂?
- mysql alter table 速度慢_MySQL中ALTER TABLE时的性能问题
- ssh 端口转发笔记
- Unity3dRPG 相机跟随player旋转_轻松记录美好生活——橙影智能摄影机M1众测报告_相机配件...
- ES智能巡检开发设计实践
- 常用javascript技巧
- 一图读懂HUAWEI HiAI Foundation
- 多睡觉,能减肥,芝加哥大学最新研究:每天多睡1小时,等于少吃一根炸鸡腿...