热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ae制h5文字动画_H5案例分享:CSS3Animation动画

CSS3Animation动画一、keyframesCSS3中的Animation动画主要的组件是keyframes,keyframes这个规则是用来创建动画的。将k

CSS3 Animation动画

一、@keyframes

CSS3中的Animation动画主要的组件是@keyframes,@keyframes这个规则是用来创建动画的。将@keyframes当作是时间轴的不同阶段,在其内部,你可以自定义时间轴的不同阶段,每个阶段有不同的CSS声明。

然后,为了使CSS动画生效,需要将@keyframes和一个选择器绑定。最后将会逐渐解析@keyframes内的全部代码,以阶段为划分,慢慢改变把最初的样式变成新的样式。

@keyframes元素

首先,定义动画的分隔。@keyframes的属性如下:

1、选择一个名字(在案例我选择fadeOne)

2、阶段划分:0%–100%,从0%到100%

3、CSS样式:你想要在每一个阶段用到的样式

例如:

@keyframe fadeOne{

0%{opacity:1; }

100%{opacity:0; }

}

或者:

@keyframe fadeOne{

from{opacity:1; }

to{opacity:0; }

}

还有一种简写形式:

@keyframe fadeOne{

to{opacity:0; }

}

上述代码将对元素的透明度应用一个过渡效果:从1到0,三种方式最终的效果相同。

二、Animation动画属性

Animation作为一个选择器去调用@keyframes。Animation有很多的属性:

1、animation-name:需要绑定到选择器的 keyframe 名称(例如fadeOne)

2、animation-duration:完成动画所花费的时间,以秒或毫秒计

3、animation-timing-function:动画的速度曲线,可以选择linear/ ease/ease-in/ ease-out/ease-in-out/cubic-bezier

速度曲线图形:

4、animation-delay:动画开始之前的时间延迟

5、animation-iteration-count:动画循环的次数

6、animation-direction:规定动画是否反向轮播,normal是默认值,正常播放;alternate表示动画反向轮播

7、animation-fill-mode:规定动画在播放之前或之后,其动画效果是否可见(none/forwards/backwards/both)

小例子:

.element{ transform: translateY(0); }

.element.on{animation: move 1s; }

@keyframes move{

from{transform: translateY(-50px)}

to  {transform: translateY( 50px)}

}

使用图片来表示 translateY 的值与 时间 的关系:

横轴为表示 时间,为 0 时表示动画开始的时间,也就是向 box 加上 on 类名的时间,横轴一格表示 0.5s

纵轴表示translateY的值,为 0 时表示 translateY 的值为 0,纵轴一格表示 50px

三、使用方法

div {

animation-name: fadeOne;

animation-duration: 4s;

animation-delay: 1s;

animation-iteration-count: infinite;

animation-timing-function: linear;

animation-direction: alternate;

}

简写:

div {

animation: fadeOne 4s 1s infinite linear alternate;

}

添加私有前缀

需要添加特定浏览器的私有前缀以确保最好的浏览器支持:chrome&Safari:-webkit-;Firefox:-moz-;Opera:-o-;IE:-ms-

修改如下:

div {

-webkit-animation: tutsFade 4s 1s infinite linear alternate;

-moz-animation: tutsFade 4s 1s infinite linear alternate;

-ms-animation: tutsFade 4s 1s infinite linear alternate;

-o-animation: tutsFade 4s 1s infinite linear alternate;

animation: tutsFade 4s 1s infinite linear alternate;

}

@keyframes也一样

@-webkit-keyframes tutsFade { /* your style */ }

@-moz-keyframes tutsFade { /* your style */ }

@-ms-keyframes tutsFade { /* your style */ }

@-o-keyframes tutsFade { /* your style */ }

@keyframes tutsFade { /* your style */ }

为了得到更多浏览器供应商的私有前缀,你可以去http://css3please.com/,查找,上面提供了非常丰富的资源。

四、多个动画

可以添加多个动画,各个动画之间用逗号分隔。

.element {

animation: fadeOne 4s 1s infinite linear alternate,

Rotate One 4s 1s infinite linear alternate;

}

@keyframes fadeOne {

to {opacity: 0; }

}

@keyframes Rotate One{

to {transform: rotate(180deg); }

}

五、代码实战

方形到圆形的动画

这个动画有5个阶段,并且在每个阶段都会对元素定义不同的border-radius,rotation和background-color。

div结构和div的CSS基本样式

声明Keyframes,创建一个名为square-to-circle的keyframe元素,包含5个阶段

应用动画,将定义的动画应用之前的div

使用时间函数和添加私有前缀

最后要添加的一个动画属性是animation-timing-function,它对动画元素的速度、加速和减速进行定义(在案例中,我给动画添加了一个cubic-bezier函数)。为了保证最好的浏览器支持,还必须添加私有前缀

核心代码:

.test { width: 200px; height: 200px; margin: 60px; position: absolute; left: 50%; top: 10%; margin-left: -100px; outline: 1px solid transparent; background-color: #00AAEE; -webkit-animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; animation: square-to-circle 2s .5s infinite cubic-bezier(1,.015,.295,1.225) alternate; }

@-webkit-keyframes square-to-circle {

0% {border-radius:0 0 0 0;background:#00AAEE;-webkit-transform:rotate(0deg);}

25% {border-radius:50% 0 0 0;background:#0374A0;-webkit-transform:rotate(45deg);}

50% {border-radius:50% 50% 0 0;background:#03506C;-webkit-transform:rotate(90deg);}

75% {border-radius:50% 50% 50% 0;background:#03B4F7;-webkit-transform:rotate(135deg);}

100% {border-radius:50%;background:#0374A0;-webkit-transform:rotate(180deg);}

}

DEMO演示:



推荐阅读
  • 深入解析HTML5字符集属性:charset与defaultCharset
    本文将详细介绍HTML5中新增的字符集属性charset和defaultCharset,帮助开发者更好地理解和应用这些属性,以确保网页在不同环境下的正确显示。 ... [详细]
  • 在第10天的夜灵HTML日志中,我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性,但在旧版浏览器中的支持情况并不理想。然而,目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器,我们提供了多种解决方案,以确保网站在不同环境下的兼容性和用户体验。此外,我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]
  • 为了实现跨浏览器兼容的禁用文本选择功能,可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类,并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外,还可以结合JavaScript进一步增强用户体验,例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]
  • 在今天的实践中,我深入学习了网页图像抓取技术,通过编写爬虫程序批量获取网站上的图片资源。具体来说,我选择了一个包含大量高质量图片的网站作为练习对象,并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解,还增强了我的编程能力。 ... [详细]
  • CSS中的pointer-events属性详解与应用
    在CSS中,`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时,通过设置`pointer-events`属性,可以决定该元素是否能够接收鼠标点击、悬停等交互操作,从而实现更灵活的用户界面设计。例如,将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件,方便实现复杂的叠加效果和交互逻辑。 ... [详细]
  • 每日前端实战:148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果
    通过点击页面右侧的“预览”按钮,您可以直接在当前页面查看效果,或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性,观众可以实时调整代码并观察变化。访问以下链接体验完整效果:https://codepen.io/comehope/pen/yRyOZr。 ... [详细]
  • 本文探讨了如何通过检测浏览器类型来动态加载特定的npm包,从而优化前端性能。具体而言,仅在用户使用Edge浏览器时加载相关包,以提升页面加载速度和整体用户体验。此外,文章还介绍了实现这一目标的技术细节和最佳实践,包括使用User-Agent字符串进行浏览器识别、条件加载策略以及性能监控方法。 ... [详细]
  • 七款高效编辑器与笔记工具推荐:KindEditor自动换行功能解析
    本文推荐了七款高效的编辑器与笔记工具,并详细解析了KindEditor的自动换行功能。其中,轻笔记QingBiJi是一款完全免费的记事本软件,用户可以通过其简洁的界面和强大的功能轻松记录和管理日常事务。此外,该软件还支持多平台同步,确保用户在不同设备间无缝切换。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • 本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码,展示了如何利用爬虫技术获取微博内容和动态图片,为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者,本文具有较高的参考价值。 ... [详细]
  • 软件测试工程师必备:全面解析Web应用的浏览器兼容性测试方法与工具
    随着市场上浏览器种类的不断增多,特别是在平板和移动设备上的普及,确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具,帮助软件测试工程师全面掌握这一关键技能,以提高应用的用户体验和可靠性。 ... [详细]
  • HTML5 Web存储技术是许多开发者青睐本地应用程序的重要原因之一,因为它能够实现在客户端本地存储数据。HTML5通过引入Web Storage API,使得Web应用程序能够在浏览器中高效地存储数据,从而提升了应用的性能和用户体验。相较于传统的Cookie机制,Web Storage不仅提供了更大的存储容量,还简化了数据管理和访问的方式。本文将从基础概念、关键技术到实际应用,全面解析HTML5 Web存储技术,帮助读者深入了解其工作原理和应用场景。 ... [详细]
  • 使用 Vue 集成 iScroll 实现移动端表格横向滚动与固定列功能 ... [详细]
  • 定义Function类型:1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]
  • CSS3 实现鼠标悬停时滚动菜单的流畅过渡效果 ... [详细]
author-avatar
iloveyoumuch18
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有