动画属性 @keyframes

动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

动画使用分为定义和调用：

定义：

/* 1. 定义的动画 */
@keyframes dance {from {transform: scale(1)}to {transform: scale(1.5)}
}

或者是

 /* 1. 定义的动画 */@keyframes dance {0% {transform: scale(1)} 100% {transform: scale(1.5)}}

调用

img {width: 200px;/* 2. 使用动画  animation: 动画名称 执行时间;   infinite 循环*/animation: dance .5s infinite;
}

动画属性

动画名字参照css类选择器命名
动画时长和延迟时间别忘了带单位 s
infinate 无限循环动画（重复次数）
alternate 为反向就是左右来回执行动画（跑马灯）
forwards 动画结束停留在最后一帧状态，不循环状态使用
linear 让动画匀速执行

鼠标经过暂停动画

/* 鼠标经过box，  则 ul 停止动画 */
.box:hover ul {animation-play-state: paused;
}

多组动画

/* 我们想要2个动画一起执行  animation: 动画1, 动画2, ... 动画n */
animation: run 1s steps(12) infinite, move 5s linear forwards;

animation相关属性控制

逐帧动画

逐帧动画：帧动画。

开发中，一般配合精灵图实现动画效果。

/* 将动画过程等分成N份 */
animation-timing-function: steps(N)；

动画属性 @keyframes相关推荐

使用css3的动画属性@keyframes创建小说轮播图
最近一直在琢磨做一个小说网站模板,在寻找灵感时发现一个很好的小说展示效果-小说三维轮播,如下图所示: 这种小说轮播展示方法不仅美观而且节省页面空间,那么他到底怎么实现的呢?由于本人是一个小白,所以去网 ...
在html5中关键帧属性的描述,CSS动画属性关键帧keyframes全解析
大概有多久没有更新专栏文章了.半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首<凉凉>送给自己),下半年贡献给 ...
不炫技，SVG+CSS3 旋转动画属性就能实现的梦幻效果
CSS3的动画相关的基础的属性基本都涉猎过了,个人认为,其中最复杂的是d:path()路径变形动画,超过3D,而位移.轨迹.旋转.缩放.斜切什么的,相对简单一些,但作为非动画设计师而言,灵活的掌握这些 ...
css3 animation 动画属性简介
animation 动画属性介绍 animation 属性是一个简写属性,用于设置动画属性: 1. animation-name----规定需要绑定到选择器的 keyframe 名称. 语法:anim ...
用css的animation动画属性来实现一个H5场景动态电子邀请函
接触css的animation 也有一段时间,经常在朋友圈会看到一些很漂亮的电子邀请函,刚开始以为是视频,后来发现原来是用css的animation来实现的.经过分析,其实是利用css的animati ...
CSS3的2D动画属性
文章目录前言一.2D转换二.2D动画的基本使用方法三.2D动画属性 1.常见属性 2.速度曲线属性 3.动画简写属性四.2D动画的具体实现 1.奔跑熊 2.盒子进圈前言动画是css中具有 ...
第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性
<1..变形旋转 2d/3d> x轴旋转 transform:rotateX(数值deg) y轴旋转 transform:rotateY(数值deg) z轴旋转 transform:rot ...
css情景动画,css3中的动画属性animation应用场景及编写代码教程
讲解一下css3中的动画属性animation应用场景及编写代码教程以下讨论的是和css3 动画属性 animation 相关的css3中的动画属性animation应用场景及编写代码教程教程文章 ...
html的动画属性,css动画属性使用及实例代码(transition/transform/animation)
在开发中,一个好的用户操作界面,总会夹杂着一些动画.css用对少的代码,来给用户最佳的体验感,下面我总结了一些css动画属性的使用方法及用例代码供大家参考,在不对的地方,希望大佬直接拍砖评论. 1 t ...

动画属性 @keyframes

动画属性

鼠标经过暂停动画

多组动画

animation相关属性控制

逐帧动画

动画属性 @keyframes相关推荐

最新文章

热门文章