CSS3动画的使用
0921自我总结
CSS3动画的使用
一.动画的创建
@keyframes规则是创建动画
浏览器兼容
1、@keyframes myfirst
2、@-webkit-keyframes myfirst /* Safari and Chrome */
3、@-moz-keyframes myfirst /* Firefox */
4、@-o-keyframes myfirst /* Opera */
根据状态的百分比来设置
@-webkit-keyframes fadeIn {
0% {
opacity: 0; /*初始状态 透明度为0*/
}
50% {
opacity: 0; /*中间状态 透明度为0*/
}
100% {
opacity: 1; /*结尾状态 透明度为1*/
}
}
上面如果有前缀下面使用的时候必须加上前缀
二.css3动画的属性
animation设置动画
``语法:animation: name duration timing-function delay iteration-count direction fill-mode
play-state;`
animation-name指定的动画, 从而执行动画
语法
:animation-name
: none
|动画名称
none:为默认值,当值为none 时,将没有任何动画效果,其可以用于覆盖任何动画
。
animation-duration主要用来设置动画播放所需时间,一般以秒为单位
语法
:animation-duration
:time
和transition-duration使用方法类似
默认单位为:'s'
0表示没有动画效果
animaton-timing- function主要用来设置动画的播放方式
语法: animation- timing- function: ease
| linear
| ease- in
| ease- out
| ease- in- out
元素根据时间的推进来改变属性值的变换速率,说得简单点就是动画的播放方式
他和transition中的transition-timing-function一样, 具有以下几种变换方式: ease、ease- in、ease-in-out、 ease-out、 linear和cubic-bezier。
animation-delay主要用来指定动画的延迟时间
语法
:animation-delay
:time
animation-iteration- count主要用来指定动画播放的循环次数
animation-iteration-count
: infinite
|time
infinite:为循环播放
time:为指定时间默认单位为S
animation-direction主要用来指定动画的播放方向
参数
值 | 描述 |
---|---|
normal | 默认值。动画按正常播放。 |
reverse | 动画反向播放。 |
alternate | 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 |
alternate-reverse | 动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
animation-play- state主要用来控制动画的播放状态
语法
:animation-play-state
: paused
|running
;
值 | 描述 |
---|---|
paused | 指定暂停动画 |
running | 指定正在运行的动画 |
animation-fill- mode主要用来设置动画的时间外属性
语法
:animation-fill-mode: none|forwards|backwards|both|initial|inherit;
值 | 描述 |
---|---|
none | 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。 |
forwards | 在动画结束后(由 animation-iteration-count 决定),动画将应用该属性值。 |
backwards | 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值(当 animation-direction 为 "normal" 或 "alternate" 时)或 to 关键帧中的值(当 animation-direction 为 "reverse" 或 "alternate-reverse" 时)。 |
both | 动画遵循 forwards 和 backwards 的规则。也就是说,动画会在两个方向上扩展动画属性。 |
initial | 设置该属性为它的默认值。请参阅 initial。 |
inherit | 从父元素继承该属性。请参阅 inherit。 |
CSS3动画的使用的更多相关文章
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画(animation)
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画,让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
- 简单CSS3动画制作
本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...
随机推荐
- Python基础-day01-2
第一个 Python 程序 目标 第一个 HelloPython 程序 Python 2.x 与 3.x 版本简介 执行 Python 程序的三种方式 解释器 -- python / python ...
- Leetcode题解 - 贪心算法部分简单题目代码+思路(860、944、1005、1029、1046、1217、1221)
leetcode真的是一个学习阅读理解的好地方 860. 柠檬水找零 """ 因为用户支付的只会有5.10.20 对于10元的用户必须找一个5 对于20元的用户可以找(三 ...
- UWP 打开系统设置面板
由于UWP各种权限管理的比较严格,所以在执行某一个特殊的操作之前,最好先申请一下相应的权限,以便告知用户你使用了这个权限,而且可以有效的避免App崩溃. 比如你想让用户手动打开麦克风权限,那么可以执行 ...
- [ASP.NET Core 3框架揭秘] 依赖注入[10]:与第三方依赖注入框架的适配
.NET Core具有一个承载(Hosting)系统,承载需要在后台长时间运行的服务,一个ASP.NET Core应用仅仅是该系统承载的一种服务而已.承载系统总是采用依赖注入的方式来消费它在服务承载过 ...
- BOM对象——Navigator
BOM对象--Navigator <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...
- java 获取当前年份 月份,当月第一天和最后一天
获取当前年份 月份,当月第一天和最后一天,工作中会经常用到,下面是代码: package basic.day01; import java.text.SimpleDateFormat; import ...
- mysql安装过程及无法启动mysql的办法
下载并解压MySQL 下载mysql-8.0.17-win64 \https://dev.mysql.com/downloads/mysql/8.0.html // 这里提供的是8.0以 ...
- 防止sql注入的最好方式
避免 SQL injection 攻击的传统方法之一是,把它作为一个输入合法性检查的问题来处理,只接受列在白名单中的字符,或者识别并避免那些列在黑名单中的恶意数据.白名单方法是一种非常有效方法,它可以 ...
- Spring Security OAuth2 开发指南(非最新版本)
请注意哈,本文翻译的时候,官网的的版本和本文翻译的时候是一一对应的. 但是官网已经更新文档和概念了,因此和本文翻译的就不在是同一个范围了. 因此我已经将标题修改为(非最新版本),各位老铁直接看官网就可 ...
- ubuntu安装navicat
ubuntu下安装navicat1.官网下载https://www.navicat.com.cn/download/navicat-premium,不清楚系统是32位的还是64位的,可以用”uname ...