keyframes应用在animation上，animation应用在元素上。

<html>

<style type="text/css">

.div1 {

 width:100px;height:100px;border:1px solid #000;position:relative;

 animation : move 800ms ease-out infinite alternate;

}

@keyframes move {

 from {top:0px;}

 to   {top:100px;}

}

</style>

<body>

<div class="div1">

</div>

</body>

</html>

　　

css animation和keyframes的更多相关文章

  1. css中animation和@keyframes 动画

    Animation 使用简写属性,将动画与 div 元素绑定: div { animation:mymove 5s infinite; -webkit-animation:mymove 5s infi ...

  2. css animation @keyframes 动画

    需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes  做动画 html <span class="horn" :class=& ...

  3. 闪动效果的实现 (jquery方式和css方式)以及 keyframes和opacity 与ie等各浏览器兼容问题

    opacity 是CSS3中:设置元素的不透明度的属性(支持ie8以上) opacity: value|inherit;value用于规定不透明度.从 0.0 (完全透明)到 1.0(完全不透明). ...

  4. CSS魔法堂：更丰富的前端动效by CSS Animation

    前言  在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...

  5. No.6 - 利用 CSS animation 制作一个炫酷的 Slider

    *{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...

  6. css3中的transform、transition、translate、animation（@keyframes）的区别

    一.前言 在CSS中,我们经常会使用到transform.transition.translate.animation(@keyframes)这些长得相似,又不好区分的属性(值).每当需要使用它们,都 ...

  7. [CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style

    We'll add animation to patio11bot using CSS keyframes. When defining a CSS animation, you can add it ...

  8. 利用 CSS animation 和 CSS sprite 制作动画

    CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...

  9. 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider

    前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...

随机推荐

  1. JAVA排序总结

    package com.softeem.jbs.lesson4; import java.util.Random; /** * 排序测试类 * * 排序算法的分类如下: * 1.插入排序(直接插入排序 ...

  2. Java之创建对象>3.Enforce the singleton property with a private constructor or an enum type

     1. 通过一个公开的字段来获取单例 // Singleton with public final field public class Elvis { public static final Elv ...

  3. 什么是XML RPC？

    # -*- coding: cp936 -*- #python 27 #xiaodeng #什么是XML RPC? #中文叫:远程过程调用 #使用http协议做传输协议的rpc机制,使用xml文本的方 ...

  4. 转 configure: error: *** libmcrypt was not found解决方案

    安装到mcrypt的时候出现了问题./configure提示出错,首先提示*** Could not run libmcrypt test program, checking why…*** The ...

  5. Linux(centos6.5)下安装jenkins

    Jenkins 的前身是 Hudson 是一个可扩展的持续集成引擎. 通俗的来讲,jenkins就是一个可以实现自动化部署的一个插件, 对于我来说,也是应用在系统部署上. 废话不多说,直接进入我们的安 ...

  6. HP ALM

    HP ALM 使用经验 使用HP ALM(Application Lifecycle Management)软件有一个多月的时间了,我是从安装,部署,建项,配置,使用,再到问题收集,这个过程过来的.发 ...

  7. Ubuntu下的init.d管理update-rc.d

    计算机在启动的时候会自动执行一些脚本,用于启动一些应用程序服务,update-rc.d 是管理这些脚本的常用命令之一. 首先这是 LinuxQuestions 中对 update-rc.d 的定义: ...

  8. Python的多线程技巧

    使用多线程可以加快程序运行速度. 遍历占用cpu不高,单线程跑程序占用的CPU很少. 多线程则是CPU占用多,内存占用少了. [一个实例]:multi_process.py ### multi_pro ...

  9. Linux主要shell命令详解(中)

    shell中的特殊字符 shell中除使用普通字符外,还可以使用一些具有特殊含义和功能的特殊字符.在使用它们时应注意其特殊的含义和作用范围.下面分别对这些特殊字符加以介绍. 1. 通配符 通配符用于模 ...

  10. Agile Development敏捷软件开发之何为敏捷开发

    敏捷软件开发之何为敏捷开发 敏捷开发,Agile Development,就是指能够在需求迅速变化的情况下快速开发软件.我们接触最多敏捷实践方式有:极限编程(XP).结对编程.测试驱动开发(TDD)等 ...