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. 使用pywin32处理excel文件

    #!/usr/bin/env python #-*- coding:utf-8 -*- ####################################################### ...

  2. APP注册邀请码

      小火箭:MrZOpba685OMLSpanBKFtkxcQf5eGOY   文章来源:刘俊涛的博客 欢迎关注,有问题一起学习欢迎留言.评论

  3. Shell与Bash

    1:Shell编程的本质 Shell的意思是“壳程序”,它是一个视窗,供我们交互. 系统中有许多负责不同功能的可执行文件,他们被添加到PATH变量后,我们就可以在Shell中通过命令行调用.这些这些可 ...

  4. Android开发之使用Handler刷新UI控件

    一.为什么必须使用Handler 线程安全问题 这个问题要理解的话很容易,如果没有这个约束,那么同时有两个线程对一个UI控件进行调整,那么控件自然就没法正常的工作,而为了解决这种二义性(就是一个东西同 ...

  5. VTK三维点集轮廓凸包提取

    碰撞检测问题在虚拟现实.计算机辅助设计与制造.游戏及机器人等领域有着广泛的应用,甚至成为关键技术.而包围盒算法是进行碰撞干涉初步检测的重要方法之一.包围盒算法是一种求解离散点集最优包围空间的方法.基本 ...

  6. jQuery方法区别(四)click() bind() live() delegate()区别

        click(),bind(),live()都是执行事件时使用的方法,他们之前是有一些区别的,我们在使用这些方法时应该根据需要进行选择. 1.click()方法是我们经常使用的单击事件方法: $ ...

  7. 体验cygwin纪实

    在windows快速体验linux,借助Cygwin很不错的体验(占用空间小),win10应用商店目前集成ubuntu.fedora...系统... 00.安装源,直接下载的是init(仅仅是下载器) ...

  8. ios中图层和view的关系

    -(void)viewMethod{ //1: 要明白uiview内部是这样实现 CALayer *layer1= [CALayer layer]; layer.delegate=self; [lay ...

  9. Java中timer的schedule()和schedualAtFixedRate()函数的区别

    本文主要讨论java.util.Timer的schedule(timerTask,delay,period)和scheduleAtFixedRate(timerTask,delay,period)的区 ...

  10. Add Microsoft SQL JDBC driver to Maven(转)

    from:http://claude.betancourt.us/add-microsoft-sql-jdbc-driver-to-maven/ Add Microsoft SQL JDBC driv ...