自定义动画

1.animation-name(动画名称)

元素所应用的动画名称,必须与规则@keyframes配合使用,因为动画名称由@keyframes定义。

语法:

animation-name :none | <identifier>

例:

div{
-webkit-animation-name : FromLeftToRight;
animation-name : FromLeftToRight;
}

2.keyframes(关键帧)

被称为关键帧,其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{...}”,括号中就是一些不同时间段样式规则。

语法:

@keyframes <identifier> {
    [ from | to | <percentage> ]{ sRules } ] [,*]
}

例:

@-webkit-keyframes FromLeftToRight{
from {left:; }
to {left: 800px; }

3.animation-duration(动画时间)

设置对象动画的持续时间

语法:

animation-duration:<time>

例:

div{
-webkit-animation-duration:1s;
animation-duration:1s
}

4. animation-timing-function(动画的过渡速度)

设置对象动画的过渡速度类型

语法:

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out

例:

div{
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}

5. animation-delay(动画延迟时间)

设置对象动画的延迟时间

语法:

animation-delay:<time>

例:

div{
-webkit-animation-delay : 1s;
animation-delay : ease-in;
}

6. animation-iteration-count(动画执行次数):

设置对象动画的延迟时间

语法:

animation-iteration-count:infinite | <number>

infinite表示无限次数

例:

div{
-webkit-animation-iteration-count :;
animation-iteration-count :;
}

7. animation-direction(动画的顺序)

设置对象动画在循环中是否按照相反顺序执行

语法:

animation-direction:normal | reverse | alternate | alternate-reverse

说明:

normal:正常方向

reverse:反方向运行

alternate:动画先正常运行再反方向运行,并持续交替运行

alternate-reverse:动画先反运行再正方向运行,并持续交替运行

例:

div{
-webkit-animation-direction : normal;
animation-direction : normal;
}

8.animation-play-state(动画的状态)

设置对象动画的状态

语法:

animation-play-state:running | paused

说明:

running:运动

paused:暂停

例:

div:hover{
-webkit-animation-play-state:paused;
animation-play-state:paused;
}

9. animation-fill-mode(动画时间之外的状态)

设置对象动画时间之外的状态

语法:

animation-fill-mode : none | forwards | backwards | both

说明:

none:默认值。不设置对象动画之外的状态

forwards:设置对象状态为动画结束时的状态

backwards:设置对象状态为动画开始时的状态

both:设置对象状态为动画结束或开始的状态

例:

div {
-webkit-animation-fill-mode : both;
animation-fill-mode : both;
}

10. animation(动画复合属性)

通过 animation ,我们能够创建自定义动画,这可以在许多网页中取代动画图片gif、Flash 动画以及 JavaScript

语法:

animation:[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [animation-iteration-count ] || [ animation-direction ] || <single-animation-fill-mode> || <single-animation-play-state> [ ,*]

例:

div{
-webkit-animation: FromLeftToRight 2s ease-out forwards;
animation: FromLeftToRight 2s ease-out forwards;
}

8.15 CSS知识点6的更多相关文章

  1. CSS知识点集锦

      CSS知识点集锦 CreateTime--2016年9月29日09:43:10Author:Marydon UpdateTime--2017年3月21日08:03:13 2.CSS样式优先级问题 ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  7. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. [LeetCode] 8. String to Integer (atoi)

    Implement atoi to convert a string to an integer. public class Solution { public int myAtoi(String s ...

  2. 黄聪:《跟黄聪学WordPress插件开发》

    续<跟黄聪学WordPress主题开发>之后,又一个作品完成!<跟黄聪学Wordpress插件开发>,国内最好的Wordpress插件开发视频教程!! 目录预览: WordPr ...

  3. Thunderbird扩展

    FromToGMAP 1.4 Mail Redirect 0.7.8 MinisizeToTray revived 1.1.2 Nightly Tester Tools 3.7 Thunderbrid ...

  4. mac 设置 git 和github 告别命令行

    针对和我一样的新手,大虾们请轻拍. 很多小伙伴都想用git管理自己的代码,或者想在github上上传自己的项目.在网上找了几篇这方面的文章,都是用命令行设置的. 用命令行管理和安装太坑爹,这里有一个简 ...

  5. 【原】redis插件安装

    wget -c https://github.com/nicolasff/phpredis/archive/2.2.4.tar.gz -O phpredis-2.2.4.tar.gz tar xzf ...

  6. MYSQL PERFORMANCE_SCHEMA HINTS

    ACCOUNTS NOT PROPERLY CLOSING CONNECTIONS [ 1 ] Works since 5.6 SELECT ess.user, ess.host , (a.total ...

  7. 转(zip文件格式说明)

    zip文件由三部分组成:压缩的文件内容源数据.压缩的目录源数据.目录结束标识结构 1. 压缩的文件内容源数据: 记录着压缩的所有文件的内容信息,其数据组织结构是对于每个文件都由file header ...

  8. [python实现设计模式]-1. 单例模式

    设计模式中,最简单的一个就是 “单例模式”, 那么首先,就实现一下单例模式. 那么根据个人的理解,很快就写出第一版. # -*- coding: utf-8 -*- class Singleton(o ...

  9. 监听自定义ItemRender的事件

    <mx:Repeater id="rp" dataProvider="{_layersInfo}">    <mx:VBox label=&q ...

  10. Ambari 不能配置 Kafka 监听host的问题

    问题:Ambari下Kafka多IP监听配置 环境:Ambari 1.7.0 , Hadoop 2.2 Kafka 0.8.1.2.2.0.0 现象: Ambari 中是不能配置Kafka的host. ...