`
zhangyaochun
  • 浏览: 2613049 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

css3 animation

    博客分类:
  • css3
阅读更多

 

    css3 animation

 

  • animation-name

           动画的名称,默认none

 

  • animation-duration

           动画播放持续的时间,单位秒,默认0

 

  • animation-timing-function

           还是ease,ease-in,ease-out这些

 

  • animation-delay

          动画开始的时间,默认0,单位秒

 

  • animation-iteration-count

           元素播放循环的次数,默认是1,infinite是无限次

 

  • animation-direction

           元素动画播放的方向,有两个值:

 

  1. normal             (默认)   每次循环向前
  2. alternate          第偶数次向前播放,第奇数次向反方向播放

 

 

  • animation-play-state

 

 

@-webkit-keyframes zhangyaochun{
		0%{
			padding:0;
		}
		50%{
			padding:0 20px;
		}
		100%{
			padding:0 100px;
		}
}

  -webkit-animation-name:zhangyaochun;

 

 

 

 

 

 

 

    先看一个兼容列表:

 

   

 

  • 大小: 98.9 KB
分享到:
评论

相关推荐

    css3 animation酷炫的文字动画特效

    在本文中,我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分,它允许我们为元素添加平滑、动态的效果,从而提升用户体验和视觉吸引力。在这个主题中,...

    CSS3 animation动画

    **CSS3 Animation动画详解** CSS3是Web设计领域的一个重大突破,它引入了许多新的特性,其中最引人注目的就是动画(Animation)功能。通过CSS3的动画,开发者可以为网页元素添加平滑、动态的效果,提升用户体验。在...

    jquery绑定 css3 animation-keyframes关键帧动画

    ### 使用jQuery绑定CSS3 Animation-Keyframes关键帧动画 #### 前言 本文将详细介绍如何通过jQuery来控制CSS3中的`animation-keyframes`关键帧动画的启动与停止。这种技术非常实用,尤其当动画需要根据用户的操作...

    Css3 animation---介绍如何实现css的动画

    **CSS3 Animation详解** 在网页设计领域,CSS3(Cascading Style Sheets Level 3)引入了一种全新的动态效果——CSS3 Animation,它允许开发者通过纯CSS方式创建丰富的视觉动画,而无需依赖JavaScript或其他插件。...

    纯css3 animation动画属性点击loading加载动画提示框效果代码.zip

    在这个名为"纯css3 animation动画属性点击loading加载动画提示框效果代码.zip"的压缩包中,我们可以预见到一个利用CSS3的animation属性创建的交互式加载提示框的示例。 动画在现代网页设计中扮演着至关重要的角色,...

    css3 animation网页logo图片加载动画特效

    在网页设计中,CSS3 Animation是一种强大的工具,用于创建丰富的动态效果,比如我们今天要讨论的"网页logo图片加载动画特效"。这个特效能够提升用户体验,使得网站在内容加载时更具吸引力,不再枯燥乏味。下面我们将...

    CSS3 Animation文字动画特效.zip

    在IT领域,CSS3 Animation是一种强大的技术,用于创建动态、交互式的网页元素,尤其是文字动画特效。本资源“CSS3 Animation文字动画特效.zip”提供了一系列精心设计的文字动画,旨在为网页增加视觉吸引力,提升用户...

    Pro CSS3 Animation

    这本书《Pro CSS3 Animation》详细讲解了如何利用CSS3的新特性来增强网页的交互性和视觉效果。书中不仅介绍了CSS3动画的基础知识,还通过实例演示了如何将这些知识应用到实际的网页设计之中,从而使得网页内容更加...

    纯CSS3 animation制作扁平风格动态天气图标效果

    在本项目中,我们探索了如何使用纯CSS3 Animation技术创建一套扁平风格的动态天气图标。CSS3 Animation是现代Web设计中一个强大的工具,它允许开发者通过关键帧动画为网页元素添加丰富的视觉效果,无需依赖...

    css3 animation白天黑夜城市变化动画场景

    【CSS3 Animation白天黑夜城市变化动画场景】 在Web开发中,CSS3的引入极大地扩展了网页的视觉表现力,特别是其动画(Animation)特性。这个“白天黑夜城市变化动画场景”是一个利用CSS3动画实现的精彩示例,它展示...

    10分钟入门CSS3 Animation

    CSS3 Animation是CSS3中用于创建动画效果的一套属性集合,允许开发者在网页元素上应用更加复杂和多样化的动画效果。这篇入门指南的重点在于介绍CSS3中的`animation`属性,以及如何使用它来制作动画,同时涉及到了`...

    css3 animation transform鱼游动动画特效.zip

    css3 animation transform鱼游动特效</title> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, user-scalable=no, ...

    基于CSS3 animation的鼠标滑过按钮特效

    **CSS3 Animation详解** 在网页设计中,CSS3(Cascading Style Sheets Level 3)引入了许多新特性,其中动画(Animation)功能让开发者能够创建出动态、丰富的用户体验。本项目"基于CSS3 animation的鼠标滑过按钮...

    CSS3 Animation圆点动画网页加载特效

    **CSS3 Animation圆点动画网页加载特效详解** 在现代网页设计中,为了提供更好的用户体验,网页加载时的动画效果越来越受到重视。"CSS3 Animation圆点动画网页加载特效"就是一个典型的例子,它利用CSS3的强大功能,...

    纯css3 animation属性制作旋转文字动画切换效果

    在本文中,我们将深入探讨如何使用CSS3的`animation`属性来创建一个旋转的文字动画切换效果。CSS3作为现代网页设计的重要工具,提供了丰富的动画功能,让我们能够无需JavaScript即可实现动态视觉效果。以下是对这个...

    jquery css3 animation属性多个页面切换动画

    本主题主要探讨如何利用jQuery与CSS3的animation属性实现多页面间的平滑过渡,为用户提供更加吸引人的浏览体验。 首先,jQuery 是一个强大的JavaScript库,它简化了DOM操作、事件处理、动画效果等任务。而CSS3的...

    CSS3 animation属性制作逼真的大风车旋转动画

    【CSS3 Animation属性详解】 CSS3的Animation属性是现代网页设计中的一个重要工具,它使得开发者能够创建复杂的动态效果,如平滑的过渡、动画序列等,而无需依赖JavaScript或者其他外部库。在本案例中,我们将深入...

    CSS3 Animation属性发光按钮代码.zip

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了许多强大的新特性,其中之一就是动画(Animation)。这个“CSS3 Animation属性发光按钮代码.zip”文件内包含的是一段利用CSS3动画效果实现的发光按钮代码。...

    纯css3 animation属性圆形动态时钟特效

    在本案例中,我们关注的是CSS3的`animation`属性,它允许我们创建复杂的动态效果,如“纯css3 animation属性圆形动态时钟特效”。这个特效通过CSS3的动画功能,实现了一个逼真的圆形时钟,时针、分针和秒针都在不断...

    纯CSS3 animation逼真的自行车动画效果代码

    本篇将深入探讨如何利用CSS3的animation特性制作逼真的自行车动画效果。 CSS3的animation属性集成了多个与动画相关的关键帧(keyframes)、持续时间、延迟、次数和方向等控制,为开发者提供了强大的动画设计工具。...

Global site tag (gtag.js) - Google Analytics