.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. Flexbox 布局的最简单表单 (转)

    作者: 阮一峰 弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了. 三年前,我写过 Flexbox 的介绍(上,下),但是有些地方写得不清楚.今天,我看到一篇教程 ...

  2. POJ 1936 All in All 匹配, 水题 难度:0

    题目 http://poj.org/problem?id=1936 题意 多组数据,每组数据有两个字符串A,B,求A是否是B的子串.(注意是子串,也就是不必在B中连续) 思路 设置计数器cnt为当前已 ...

  3. DBProxy 读写分离使用说明

    美团点评DBProxy读写分离使用说明   目的 因为业务架构上需要实现读写分离,刚好前段时间美团点评开源了在360Atlas基础上开发的读写分离中间件DBProxy,关于其介绍在官方文档已经有很详细 ...

  4. jenkins部署web项目到tomcat（五）

    (1)maven构建web项目 pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&q ...

  5. Ubuntu 14.04 安装 Xilinx ISE 14.7 全过程（转）

    reference:https://www.cnblogs.com/tracyone/p/3561781.html 按照ISE后,建立ISE启动连接: 这个帖子作为我安装xilinx ISE 14.7 ...

  6. C# struct and enum

    struct Person { public int age; public string name; public string fname; public string class; } enum ...

  7. TensorFlow随机值：tf.random_normal函数

    tf.random_normal 函数 random_normal( shape, mean=0.0, stddev=1.0, dtype=tf.float32, seed=None, name=No ...

  8. Linux：NFS配置

    NFS配置 1.创建分享的文件:touch /var/www/html/aa.txt2.查看是否安装NFS:rpm -qa|grep nfs3.查看IP地址:ifconfig4.配置NFS:vi /e ...

  9. chromium ②

    这篇研究两个问题:chromium对线程的封装和进程通信.主要参考chromium的官方技术文档:Treading和Inter-process Communication (IPC). chrome速 ...

  10. 2017年3月1日09:45:39 css选择器，session数据取不到

    昨天碰到了一个问题,通过输入指定的url进行登录在服务端将url存在session中但是登陆之后因为页面提交的登录请求是ajax请求,在后端提取session时获取不当之前存的url,老司机说不是同一 ...