@keyframes设置动画规则,可以理解为一个剧本;

  1.name动画的名字必需填写  2.可以使用百分比0%-100%或者from...to...必填内容;  3.需要变化css的样式;必需;

  animation所有动画的简写属性排序如下:

  animation-name动画的名字  / animation-duration 持续时长  / animation-timing-function规定动画的速度曲线。/

  animation-delay动画定时  /animation-iteration-count动画的运动的次数  /animation-direction属性定义是否应该轮流反向播放动画。

  animation-timing-function:规定动画的运动速度曲线。

    属性有如下几种:linear匀速进行  ease 开始低速逐渐加快结束时候再变慢

            ease-in动画以低速开始  ease-out动画以低速结束

            ease-in-out动画以低速开始和结束  cubic-bezier(n,n,n,n)在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

  animation-direction:normal默认属性 顺序播放/alternate轮流反向播放。

  animation-iteration-count:n设置次数;infinite无限次循环播放;

  animation-play-state:默认running是正常播放  /paused暂停动画 需要结合js代码才能实现

  animation-fill-mode:定义动画结束之外的状态:none 不改变默认行为  /forwards当动画完成,保留最后一个属性值

            /backwards 定义在animation-delay中这一段时间,应用开始的属性值,在动画开始之前的状态。

            both向前和向后填充模式都被应用(意思是以上2种方法同时会被使用。)

  下面是个小实例:

    

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="file:///C|/Users/xz/Desktop/学习工具/images/Untitled-2.css">
</head>
<body>
<div class="dh">
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */

div{
width:200px;
height:400px;
background:rgba(153,102,0,0.8);
animation-name:mydh;
animation-duration:2s;
animation-timing-function:linear;
animation-delay:0s;
animation-iteration-count:infinite;
animation-direction:alternate;
}
@keyframes mydh{
0%{
width:200px;
height:400px;
margin-top:100px;
background-color:#0F3;
}
50%{
width:300px;
height:200px;
background-color:#CC9;
margin-top:250px;
}
100%{
width:200px;
height:400px;
background-color:#C36;
margin-top:300px;}
}

Css3关键帧动画的更多相关文章

  1. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  2. css3 实现动画

    CSS3,我们可以创建动画,它可以取代许多网页动画图像,例如下面这个小球动画 使用css3关键帧动画可以轻松实现 请看下面代码 <!DOCTYPE html> <html lang= ...

  3. CSS3过渡动画&关键帧动画

    一.过渡动画 过渡(transition)动画,就是从初始状态过渡到结束状态这个过程中所产生的动画. 所谓的状态就是指大小.位置.颜色.变形(transform)等等这些属性. Note:不是所有属性 ...

  4. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  5. css3 animation动画技巧

    一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...

  6. CSS3之动画相关

    CSS3动画相关的属性:transform,transition,animation. 变形Transform 语法: transform: rotate | scale | skew | trans ...

  7. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  8. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  9. CSS3 之动画及兼容性调优

    由于CSS3动画对低版本的浏览器的支持效果并不是很好,特别是IE9及以下版本,更是无法支持. 所以有时候一些简单的动画效果,还只是用js代码来实现,但是效率偏低,而且效果有些偏生硬,不够顺滑. 毕竟用 ...

随机推荐

  1. 使用Spring Boot搭建应用开发框架(一) —— 基础架构

    Spring的简史 第一阶段:XML配置,在Spring1.x时代,使用Spring开发满眼都是xml配置的Bean,随着项目的扩大,我们需要把xml配置文件分放到不同的配置文件里,那时候需要频繁的在 ...

  2. ionic2+Angular 使用HttpInterceptorService拦截器 统一处理数据请求

    sstep1:新建http-Interceptor.ts文件 import { Injectable } from '@angular/core'; import { HttpInterceptorS ...

  3. 【Tools】ubuntu无法virtualenv创建python虚拟环境的解决

    刚有人问我Ubuntu python虚拟环境无法创建问题,报错same file error,防止今后遇到忘记,记录下可能的问题. 1.先在windows上试了下: pip install virtu ...

  4. mac攻略(1) -- 简单配置php开发环境

    [http://www.cnblogs.com/redirect/p/6112154.html]   最简单直接的方式还是使用 Mac 上自带的 Apache 和 PHP.   1.启动 Apache ...

  5. Mac通过brew安装reds、memcached

    redis brew install php70-redis 配置文件: /usr/local/etc/php/7.0/conf.d/ext-redis.ini memcached brew inst ...

  6. Rsync(远程同步): linux中Rsync命令的实际示例

    rsync的 ( 远程同步 )为在Linux / Unix系统局部 拷贝和同步文件和目录远程以及一个最常用的命令. 随着rsync命令的帮助,您可以复制并在目录中远程和本地同步数据,在磁盘和网络,进行 ...

  7. HTML5VEDIO标签阿里云-微信浏览器兼容性问题

    在网页展示媒体对象,离不开HTML5的 audio和video对象.但这两个目前来看兼容性方面还得关注一下. 目前在做一个阿里云下载video 并在微信端播放mp4格式的视频的时候,碰到了一些兼容性问 ...

  8. 如何通过SpringBoot官方手册集成RabbitMQ

    众所周知,SpringBoot是对Spring的一层封装,用来简化操作. 随着SpringBoot的越发成熟,很多的流行技术都提供了SpringBoot的版本. 可以点击下方的连接查看spring-b ...

  9. hdu 1878 无向图的欧拉回路

    原题链接 hdu1878 大致题意: 欧拉回路是指不令笔离开纸面,可画过图中每条边仅一次,且可以回到起点的一条回路.现给定一个无向图,问是否存在欧拉回路? 思路: 无向图存在欧拉回路的条件:1.图是连 ...

  10. java网络编程(6)——实现一个服务器把小写转大写

    实现一个服务器,通过我们发送的文本数据,然后转回大写放回,实现一个服务端与客户端的交互,用over来作为结束标记,具体代码如下: 客户端: package com.seven.tcp; import ...