.page3_ship{

background:url(../image/boat_02.png) 0 center no-repeat;
background-size: 486px 385px;
position:absolute;bottom:0;left:50%;margin-left:-121.5px;width:243px;height:385px;}

当两个类名同时存在时生效
.page3_ship.animate{
-webkit-animation: 1s animate_page3ship steps(2) infinite;
}

规定动画各个阶段的状态和动画名字
@-webkit-keyframes animate_page3ship{
0%{background-position: 0 0;}
100%{background-position: -486px 0;}
}

添加aimate动画的更多相关文章

  1. Android动画效果之自定义ViewGroup添加布局动画

    前言: 前面几篇文章介绍了补间动画.逐帧动画.属性动画,大部分都是针对View来实现的动画,那么该如何为了一个ViewGroup添加动画呢?今天结合自定义ViewGroup来学习一下布局动画.本文将通 ...

  2. JavaScript网站设计实践（三）设计有特色的主页，给主页链接添加JavaScript动画脚本

    一.主页一般都会比较有特色,现在在网站设计(二)实现的基础上,来给主页添加一点动画效果. 1.这里实现的动画效果是:当鼠标悬停在其中某个超链接时,会显示出属于该页面的背景缩略图,让用户知道这个链接的页 ...

  3. Android至ViewPager添加切换动画——使用属性动画

    转载请注明出处:http://blog.csdn.net/allen315410/article/details/44200623 ViewPager作为Android最经常使用的的组件之中的一个.相 ...

  4. Android使用shape制作圆形控件及添加弹跳动画

    --------本来为作者原创,未经同意禁止转载 前言:我们在很多时候都需要在res/drawable文件夹下创建相应的xml文件来为控件添加一些样式效果,比如按钮按下时的按钮样式变化.或者指定按钮的 ...

  5. SpriteBuilder中如何给精灵添加帧动画

    首先你必须准备若干幅图片,当然最好做成Smart Sprite Sheet. 打开一个CCB文件,并鼠标选择根节点的CCSprite对象. 保持前者选中且Timeline的当前时间点把手在最左边,然后 ...

  6. iOS-tableViewCell创建时添加一些动画

    有时候因为项目的需要,给tableView添加一些动画: cell.layer.transform = CATransform3DMakeScale(); [UIView animateWithDur ...

  7. Android笔记之为自定义对话框添加移动动画效果

    给底部的对话框添加移动动画效果 可通过Window.setWindowAnimations(int resId)设置 SharingDialog.java package com.bu_ish.sha ...

  8. 微课制作软件Camtasia，来为视频添加预设动画效果

    之前已介绍过使用微课制作软件Camtasia为视频添加"缩放和平移"动画的教程以及"效果按钮"的使用. 此篇内容,我们就来介绍使用录像编辑软件--Camtasi ...

  9. [f]添加css3动画的方法

    添加css3的一些动画的属性 使用方法: css3(oDiv[0], 'scale', 300)('rotate', 300);css3(oDiv[0], 'animation', '"dd ...

随机推荐

  1. 微信小程序 无限加载 上拉加载更多

    加载更多,其实就是再次向接口发送请求,把返回的数据,追加到渲染页面的数组里的过程,具体实现实例如下: demo.js // pages/project/project.js const app = g ...

  2. 开发Web应用（1）（二十）

    静态资源访问 在我们开发Web应用的时候,需要引用大量的js.css.图片等静态资源. 默认配置 Spring Boot默认提供静态资源目录位置需置于classpath下,目录名需符合如下规则: /s ...

  3. SpringBoot添加webapp目录

    一.文章简述 使用IDEA工具创建的SpringBoot项目本身是没有webapp目录的.如果我们想要添加webapp目录的话,可以手动添加. 二.操作步骤 1)点击IDEA右上角的Project S ...

  4. -L、-rpath和-rpath-link的区别

    链接器ld的选项有 -L,-rpath 和 -rpath-link,看了下 man ld,大致是这个意思: -L::  “链接”的时候去找的目录,也就是所有的 -lFOO 选项里的库,都会先从 -L ...

  5. laravel自定义公共函数的引入

    原文地址:http://blog.csdn.net/u011415782/article/details/78925048 步骤指导 1. 创建 functions.php 在 app/Helpers ...

  6. learning ddr mode reigsters

    For application flexibility, various functions, features, and modes are programmable in four Mode Re ...

  7. .NetCore发布到Centos docker

    将.netcore mvc项目发布到centos7的docker中.环境 vmware14+Centos7+docker-ce 1.使用vs将.netcoremvc项目发布到本地,修改发布后的目录 名 ...

  8. ubuntu compile openjdk87

    0. use oracle JDK,not OpenJDK 1. 遇到错误Error:./gamma: relocation error: /usr/lib/jvm/java-7-openjdk-am ...

  9. JavaScript -基础- 变量、常量

    一.变量 <script> var a=1 var b=3 var a= 1;   //使用var 定义变量,分号结尾(可不加,换行符也可) var b=3; var a= 1; var ...

  10. innodb mvcc，事务隔离级别，读写锁

    mvcc其实和copyonwritelist的思路差不多:读不加锁,写加锁,事务提交之后释放锁,并且延伸的是,在UNdolog里面保存了几个版本,实现不同的隔离级别.如果读数据页里面最新的数据,那么就 ...