HTML动画(难点)

  1. animation-delay
    这个属性是规定动画开始前等待几秒才开始。本来是很好理解的,但是当时就有个疑问:假如我的动画是连续执行好多次的情况下的话,是第一次执行前才会延迟还是每次执行前都会延迟呢?答案是:只有第一次会。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
    @-webkit-keyframes delay{
       
        99%{
            -webkit-transform:translate(100px,0);
        }
      
    }
    .delay{

        width:100px;height:100px;
        background-color: #000;
        -webkit-animation:delay 1s linear 2s infinite;
        animation:delay 1s linear 2s infinite;
    }
</style>
</head>
<body>
    <div class="delay"></div>
</body>
</html>

animation-fill-mode
该属性有四个值
none:默认值。不设置对象动画之外的状态
forwards:设置对象状态为动画结束时的状态
backwards:设置对象状态为动画开始时的状态
both:设置对象状态为动画结束或开始的状态
一开始比较纠结着三个到底有什么区别。网上也找了,发现网上说的有点错误。起码我试了一下forwards和both的效果是一模一样的。都是动画运行完了停在哪里就是哪里。至于backwards,就是总停在一开始的状态。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
    @-webkit-keyframes delay{
       
        100%{
            -webkit-transform:translate(100px,0);
        }
      
    }
    .delay{

        width:100px;height:100px;
        background-color: #000;
        -webkit-animation:delay 1s linear 2 forwards alternate;
    }
</style>
</head>
<body>
    <div class="delay"></div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style type="text/css">
    @-webkit-keyframes delay{
       
        100%{
            -webkit-transform:translate(100px,0);
        }
      
    }
    .delay{

        width:100px;height:100px;
        background-color: #000;
        -webkit-animation:delay 1s linear 2 both alternate;
    }
</style>
</head>
<body>
    <div class="delay"></div>
</body>
</html>
    1. 两段代码主要说明在forwards和both的情况下动画在设置了反向运行偶次数时,效果仍然一样。因为之前看到网上说的是forwards在偶次数反向是会停在关键帧的100%处,而不是0%处。
    2. iteration-count
      运行次数。
      这个本来没什么好说的,一目了然,但是无意中发现,有以下的特殊情况:
      不能为负数
      可以为0    
      为0的时候,按1来算
      可以为小数   
      小数的时候,不会取整。而是多少就运行多少,比如 .5 就运行到50%的位置。
时间: 2024-12-13 12:54:39

HTML动画(难点)的相关文章

赵雅智:android教学大纲

带下划线为具体内容链接地址,点击后可跳转,希望给大家尽一些微薄之力,目前还在整理中 教学章节 教学内容 学时安排 备注 1 Android快速入门 2 Android模拟器与常见命令 3 Android用户界面设计 4 Android网络通信及开源框架引用 5 线程与消息处理 6 数据存储及访问 7 Android基本单元应用activity 8 Android应用核心Intent 9 资源访问 10 ContentProvider实现数据共享 11 BroadcastReceiver 12 S

亮相SIGGRAPH 太极拳三维教学App制作揭秘

http://news.hxsd.com/CG-animation/201208/663303.html 编者按:<My Tai Chi>是一系列基于移动平台的三维互动产品,由北京七星汇工作室和清华大学课题组用了两年时间联合开发完成.该APP获选2012年ACM SIGGRAPH.SIGGRAPH大会于8月8日为该APP做了专门的DAMO展示,是中国本土创意团队和开发团队首次借助移动平台结合三维动画.信息互动技术推广中国传统功夫文化的成功尝试. 主创团队 选题锁定功夫 采集太极大师动作数据 随

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最

android属性动画

一.概述 android动画总共分为三种逐帧动画.补间动画.属性动画. 逐帧动画:主要就是将几张图片放在一起播放形成动画. 补间动画:补间动画还是比较局限的,能实现view的旋转.横竖拉伸.横竖平移.透明度等简单的变化. 由于android速度发展之快,原有的两种动画已经不能满足我们的需求,所以android在3.0版本推出了一个高大上的动画效果,属性动画. 二.相关API: ValueAnimator:属性动画的执行类,主要负责计算各个帧所对应的属性的值,可以处理动画的更新事件,它可以定义属性

iOS开发 QQ粘性动画效果

QQ(iOS)客户端的粘性动画效果 时间 2016-02-17 16:50:00  博客园精华区 原文  http://www.cnblogs.com/ziyi--caolu/p/5195615.html 主题 iOS开发 qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈会自动弹性的回到原来的位置.而如果超出一定距离,这个圆圈会做一个销毁的动画,

PPT制作线条动画

0.小叙闲言 今天在用PPT做动画的时候小有心得,百度了一下线条动画制作,有一个贴子里面的讨论,也给了我一些灵感,贴子地址:http://www.rapidbbs.cn/thread-24577-1-1.html.但是还是没有做下图这样的效果的动画,这是自己纯想出来的,分享一下,或许对大家有点帮助.文章中的PPT下载地址:http://files.cnblogs.com/files/endlesscoding/PPT_Line_Animations.zip 1.PPT简单线条动画 平时做线条动画

Android -- 贝塞尔实现水波纹动画(划重点!!)

1,昨天看到了一个挺好的ui效果,是使用贝塞尔曲线实现的,就和大家来分享分享,还有,在写博客的时候我经常会把自己在做某种效果时的一些问题给写出来,而不是像很多文章直接就给出了解决方法,这里给大家解释一下,这里写出我遇到的一些问题不是为了凑整片文章的字数,而是希望大家能从根源下知道它是怎么解决的,而不是你直接百度搜索这个问题解决的代码,好了,说了这么多,只是想告诉大家,我后面会在过程中提很多问题(邪恶脸,嘿嘿嘿),好吧,来看看今天的效果: 2,what is the fuck?,这就是你说的很好看

控制人物转向移动,动画播放的过程中插播其他动画后返回

人物转向移动的代码是我在网上粘贴后改动的-----------------------侵删--------------------------- 难点:如何在A动画中插播B动画再返回 思路:开始我的想法是在两个动画之间create transition用代码控制返回,但是条件是2s播放一次,间隔时间的重制和这个有冲突,如何使B动画播放完毕后再返回,后来经大神指点(万分感谢呀O(∩_∩)O~~),在A动画播放的状态下判断时间,2s后直接播放B动画,transition 勾选Has Exit Tim

模拟炮弹动画效果,平移动画

本程序是模拟子弹无限的弹出平移的动画效果 知识点:(难点) 0,masony自适应布局(下载地址:https://github.com/Masonry/Masonry) 1,循环创建等间距的View 2,向可变数组中添加和取出这些View 3,定时器 4,循环执行 5,循环执行平移 6,加速和减速 感谢金ML小姐的无私帮助,接下来直接上代码: // //  ViewController.m //  模拟炮弹的实现 // //  Created by WBapple on 16/8/23. //