关键帧动画

<style type="text/css">

.demo{

animation-name: demoAnimation; 定义关键帧动画的名称 名称为我们使用@keyframes定义的动画

animation-duration: 2s;动画持续时间

animation-delay: 2s;设置动画的延迟进行时间 在关键帧动画里该属性对于动画回去的时候没有效果这点和过渡动画不同

animation-iteration-count: infinite;设置动画进行的次数 infinite代表无限次

animation-direction:alternate-reverse;定义动画在进行时的方向

默认值是normal代表动画正常时候的播放

reverse代表设置动画反向播放

alternate动画在奇数次正向播放,在偶数次反向播放

alternate-reverse设置动画奇数次反向播放 偶数次正向播放

animation-play-state: paused;设置动画暂停 默认是running

animation-fill-mode: forwards;设置动画的填充规则,即规定动画在播放之前或者之后,其动画效果是否可见

forwards代表在动画结束时保留最后一帧

animation-fill-mode: backwards;

backwards代表在animation-delay存在的时候等待时显示的为第一帧,不设置该属性的时候等待的显示为初始状态

both forwards和backwards都有

animation-timing-function: step-end;

steps()有两个参数第一个参数是数字代表动画进行的帧数,但是该数字设置的每个动画阶段的帧数

第二个参数可以是end或者start 默认是end

end代表在进行动画的时候省略100%的那一个状态

start代表在进行动画的时候省略0%的那个状态

step-start其和steps(1,start)一样

step-end其和steps(1,end)一样

}

例.demo:hover{ animation-play-state: paused; } 在鼠标放在动画上暂停

@keyframes demoAnimation{

0%{width: 100px; }

50%{ width: 200px; }

100%{ width: 300px; }

}

@keyframes可以让我们来自定义关键帧动画,from代表动画开始的状态 也可以用0%,to代表是动画结束的状态 也可以用100%

</style>

时间: 2024-10-05 08:39:58

关键帧动画的相关文章

iOS:核心动画之关键帧动画CAKeyframeAnimation

CAKeyframeAnimation——关键帧动画 关键帧动画,也是CAPropertyAnimation的子类,与CABasicAnimation的区别是: –CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 – 属性说明: –values:上述的NSArray对象.里面的元素称为“关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显

iOS block-base 动画简单用法+关键帧动画设置线性变化速度的问题

本文转载至 http://www.tuicool.com/articles/aANBF3m 时间 2014-12-07 20:13:37  segmentfault-博客原文  http://segmentfault.com/blog/alan/1190000002411296 iOS的各种动画相漂亮,相信这是吸引很多人买iPhone的原因之一.不仅如此,这还是吸引我做iOS开发的一大原因,因为在iOS上给界面实现一些像样的动画实在是太轻松了! 这里就介绍一下iOS的block-based an

缓动函数与关键帧动画

缓动函数与关键帧动画 缓动函数指定动画效果在执行时的速度,使其看起来更加真实. 现实物体照着一定节奏移动,并不是一开始就移动很快的.当我们打开抽屉时,首先会让它加速,然后慢下来.当某个东西往下掉时,首先是越掉越快,撞到地上后回弹,最终才又碰触地板. http://easings.net/zh-cn 缓动函数能让动画效果看起来更加真实:). iOS开发中,能用到缓动函数的地方就属于关键帧动画了,以下是我用关键帧动画做出来的模拟真实时钟效果的动画,效果相当逼真哦,只是这个gif图片的效果不好而已.

关键帧动画:@keyframes

关键帧动画:@keyframes: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>关键帧动画</title> 6 <style type="text/css"> 7 .div1{ 8 width: 200px; 9 height: 200px; 10 background: yellow;

IOS动画(3)关键帧动画

关键帧动画中的时间系统,模型树和呈现树与基础动画一致,这里主要介绍关键帧动画的用法 CAKeyframeAnimation - (void)viewDidLoad { [super viewDidLoad]; CALayer *layer = [CALayer layer]; layer.bounds = CGRectMake(0, 0, 120, 120); layer.position = CGPointMake(100, 300); layer.cornerRadius = 60; lay

iOS基本动画/关键帧动画/利用缓动函数实现物理动画效果

先说下基本动画部分 基本动画部分比较简单, 但能实现的动画效果也很局限 使用方法大致为: #1. 创建原始UI或者画面 #2. 创建CABasicAnimation实例, 并设置keypart/duration/fromValue/toValue #3. 设置动画最终停留的位置 #4. 将配置好的动画添加到layer层中 举个例子, 比如实现一个圆形从上往下移动, 上代码: 1 //设置原始画面 2 UIView *showView = [[UIView alloc] initWithFrame

《Programming WPF》翻译 第8章 4.关键帧动画

原文:<Programming WPF>翻译 第8章 4.关键帧动画 到目前为止,我们只看到简单的点到点的动画.我们使用了To和From属性或者By属性来设计动画--相对于当前的属性值.这很适合简单的动画,但是我们可以构造序列来创建更复杂的动画,这可能是非常麻烦的.幸运的是,这是没有必要的.WPF提供了动画对象,允许我们详细指出一系列时间和值. 在影视中传统的动画中,这是普通的开始--通过绘制最重要的动画步骤.这些关键帧定义了场景的基本流程,捕获了它的最重要的点.只要一旦这些关键帧是满意的,是

关键帧动画(2)心脏的跳动

// //  ViewController.m //  UI-NO-38-1基础动画实例1 // //  Created by 容伟 on 15/9/17. //  Copyright (c) 2015年 容伟. All rights reserved. // /*  CAKeyframeAnimation 也属于 CAPropertyAnimation  关键帧动画  可以让我们精准的控制动画效果  它的原理是 把动画序列里面比较关键的帧取出来  设置他的动画效果    values属性 执行

iOS开发——动画编程OC篇&amp;(三)关键帧动画

一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的 区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而 CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组中的每一个关键帧 path:可以设置一

iOS开发UI篇—核心动画(关键帧动画)

iOS开发UI篇—核心动画(关键帧动画) 一.简单介绍 是CApropertyAnimation的子类,跟CABasicAnimation的区别是:CABasicAnimation只能从一个数值(fromValue)变到另一个数值(toValue),而CAKeyframeAnimation会使用一个NSArray保存这些数值 属性解析: values:就是上述的NSArray对象.里面的元素称为”关键帧”(keyframe).动画对象会在指定的时间(duration)内,依次显示values数组