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动画的使用的更多相关文章

  1. css3动画第一式--简单翻滚

    在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...

  2. CSS3动画制作

    CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...

  3. 学习CSS3动画(animation)

    CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...

  4. 用CSS3动画,让页面动起来

    以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...

  5. CSS3动画几个平时没注意的属性

    一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...

  6. 用CSS3动画特效实现弹窗效果

    提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...

  7. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  8. CSS3动画事件

    CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...

  9. css3动画简介以及动画库animate.css的使用

    在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...

  10. 简单CSS3动画制作

    本贴已重新编辑至http://www.cnblogs.com/fastmover/p/4977358.html 最近需要用到了一些CSS3动画,基本用Animate.css(https://githu ...

随机推荐

  1. Python基础-day01-2

    第一个 Python 程序 目标 第一个 HelloPython 程序 Python 2.x 与 3​​.x 版本简介 执行 Python 程序的三种方式 解释器 -- python / python ...

  2. Leetcode题解 - 贪心算法部分简单题目代码+思路(860、944、1005、1029、1046、1217、1221)

    leetcode真的是一个学习阅读理解的好地方 860. 柠檬水找零 """ 因为用户支付的只会有5.10.20 对于10元的用户必须找一个5 对于20元的用户可以找(三 ...

  3. UWP 打开系统设置面板

    由于UWP各种权限管理的比较严格,所以在执行某一个特殊的操作之前,最好先申请一下相应的权限,以便告知用户你使用了这个权限,而且可以有效的避免App崩溃. 比如你想让用户手动打开麦克风权限,那么可以执行 ...

  4. [ASP.NET Core 3框架揭秘] 依赖注入[10]:与第三方依赖注入框架的适配

    .NET Core具有一个承载(Hosting)系统,承载需要在后台长时间运行的服务,一个ASP.NET Core应用仅仅是该系统承载的一种服务而已.承载系统总是采用依赖注入的方式来消费它在服务承载过 ...

  5. BOM对象——Navigator

    BOM对象--Navigator <!DOCTYPE html> <html> <head> <meta charset="utf-8"& ...

  6. java 获取当前年份 月份,当月第一天和最后一天

    获取当前年份 月份,当月第一天和最后一天,工作中会经常用到,下面是代码: package basic.day01; import java.text.SimpleDateFormat; import ...

  7. mysql安装过程及无法启动mysql的办法

    下载并解压MySQL 下载mysql-8.0.17-win64 \https://dev.mysql.com/downloads/mysql/8.0.html        // 这里提供的是8.0以 ...

  8. 防止sql注入的最好方式

    避免 SQL injection 攻击的传统方法之一是,把它作为一个输入合法性检查的问题来处理,只接受列在白名单中的字符,或者识别并避免那些列在黑名单中的恶意数据.白名单方法是一种非常有效方法,它可以 ...

  9. Spring Security OAuth2 开发指南(非最新版本)

    请注意哈,本文翻译的时候,官网的的版本和本文翻译的时候是一一对应的. 但是官网已经更新文档和概念了,因此和本文翻译的就不在是同一个范围了. 因此我已经将标题修改为(非最新版本),各位老铁直接看官网就可 ...

  10. ubuntu安装navicat

    ubuntu下安装navicat1.官网下载https://www.navicat.com.cn/download/navicat-premium,不清楚系统是32位的还是64位的,可以用”uname ...