前端vue keyframes动画

8.1.2 keyframes动画

transition动画适合用来创建简单的过渡效果。CSS3中支持使用animation属性来配置更加复杂的动画效果。animation属性根据keyframes配置来执行基于关键帧的动画效果。新建一个名为keyframes.vue的测试文件。编写如下代码:

<template><view class="content"><div id="Application"><div :class="cls" @click="run"></div></div></view></template><script>export default {data() {return {cls: "demo"}},onLoad() {},methods: {run() {if (this.cls == "demo") {this.cls = "demo-ani"} else {this.cls = "demo"}}}}</script><style>.content {display: flex;flex-direction: column;align-items: center;justify-content: center;padding-top: 60px;}/* .demo {width: 100px;height: 100px;background-color: red;} */@keyframes animation1 {0% {background-color: red;width: 100px;height: 100px;}25% {background-color: orchid;width: 200px;height: 200px;}75% {background-color: green;width: 150px;height: 150px;}100% {background-color: blue;width: 200px;height: 200px;}}.demo {width: 100px;height: 100px;background-color: red;}.demo-ani {animation: animation1 4s linear;width: 200px;height: 200px;background-color: blue;}</style>

在上面的CSS代码中,keyframes用来定义动画的名称和每个关键帧的状态,0%表示动画起始时的状态,25%表示动画执行到1/4时的状态,同理,100%表示动画的终止状态。对于每个状态,我们将其定义为一个关键帧,在关键帧中,可以定义元素的各种渲染属性,比如宽和高、位置、颜色等。在定义keyframes时,如果只关心起始状态与终止状态,也可以这样定义:

@keyframes animationl {from {background-color:red; width: 100px; height: 100px;}to {background-color:orchid; width: 200px; height: 200px;}}

定义好了keyframes关键帧,在编写CSS样式代码时可以使用animation属性为其指定动画效果,如以上代码设置要执行的动画为名为animation1的关键帧动画,执行时长为4秒,执行方式为线性。animation的这些配置项也可以分别进行设置,示例如下:

.demo-ani {/*设置关键帧动画名称 */animation-name:animationl;/*设置动画时长 */animation-duration:3s;/*设置动画播放方式:渐入渐出*/animation-timing-function:ease-in-out;/*设置动画播放的方向*/animation-direction:alternate;/*设置动画播放的次数 */animation-iteration-count: infinite;/*设置动画的播放状态*/animation-play-state:running;/*设置播放动画的延迟时间*/ animation-delay:1s;/*设置动画播放结束应用的元素样式*/ animation-fill-mode:forwards; width: 200px; height: 200px;background-color:blue;}

通过上面的范例,我们已经基本了解了如何使用原生的CSS,有了这些基础,再使用Vue中提供的动画相关API时会非常容易。

阅读全文下载完整组件代码请关注微信公众号: 前端组件开发

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/222265.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

连获4大奖项,欧科云链成Web3行业领跑者

2023年底&#xff0c;作为深耕区块链大数据且持续关注监管与合规科技的Web3企业&#xff0c;欧科云链连续斩获4大奖项&#xff0c;包括第十三届中国证券金紫荆奖、财联社“最具创新价值奖” 、界面新闻“优致雇主奖”与“好公司50”&#xff0c;成为中国Web3领域中最受关注的企…

利用Matplotlib画简单的线形图

实验题目&#xff1a;简单的线形图 实验目的&#xff1a;利用Matplotlib画简单的线形图 实验环境&#xff1a;海豚大数据和人工智能实验室&#xff0c;使用的Python库 名称 版本 简介 numpy 1.16.0 线性代数 Pandas 0.25.0 数据分析 Matplotlib 3.1.0 数据可视化 …

「工业遥测」图表控件LightningChart在水工业中的应用

LightningChart.NET完全由GPU加速&#xff0c;并且性能经过优化&#xff0c;可用于实时显示海量数据-超过10亿个数据点。 LightningChart包括广泛的2D&#xff0c;高级3D&#xff0c;Polar&#xff0c;Smith&#xff0c;3D饼/甜甜圈&#xff0c;地理地图和GIS图表以及适用于科学…

实在智能成功完成近2亿元C轮融资,全面迎接2024年Agent智能体应用元年

在这个最冷的季节&#xff0c;杭州实在智能科技有限公司&#xff08;以下简称“实在智能”&#xff09;依然表现火爆&#xff0c;近日&#xff0c;实在智能成功完成C轮融资近2亿元人民币&#xff0c;由金泰富资本和安吉智慧谷共同领投、安吉两山国创跟投。 在此轮融资以前&…

Kubernetes pod ip 暴露

1. k8s pod 和 service 网络暴露 借助 iptables 的路由转发功能&#xff0c;打通k8s集群内的pod和service网络&#xff0c;与外部网络联通 # 查看集群的 pod 网段和 service 网段 kubectl -n kube-system describe cm kubeadm-config networking:dnsDomain: cluster.localpod…

Gazebo GUI模型编辑器

模型编辑器 现在我们将构建我们的简单机器人。我们将制作一个轮式车辆&#xff0c;并添加一个传感器&#xff0c;使我们能够让机器人跟随一个斑点&#xff08;人&#xff09;。 模型编辑器允许我们直接在图形用户界面 &#xff08;GUI&#xff09; 中构建简单的模型。对于更复…

NCV8460ADR2G在汽车和工业应用中高压侧驱动如何破?

NCV8460ADR2G是一款完全保护的高压侧驱动器&#xff0c;可用于开关各种负载&#xff0c;如灯泡、电磁阀和其他致动器。该器件可以通过有源电流限制和高温关断针对过载情况进行内部保护。 诊断状态输出引脚提供了高温以及开关状态开路负载情况的数字故障指示。 特性&#xff1a;…

Leetcod面试经典150题刷题记录 —— 矩阵篇

矩阵篇 1. 有效的数独2. 螺旋矩阵Python 3. 旋转图像Python额外开辟数组空间原地置换法 4. 矩阵置零5. 生命游戏Python 1. 有效的数独 题目链接&#xff1a;有效的数独 - leetcode 题目描述&#xff1a; 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验…

Android的组件、布局学习

介绍 公司组织架构调整&#xff0c;项目组需要承接其他项目组的android项目&#xff0c;负责维护和开发新需求&#xff0c;故学习下基础语法和项目开发。 组件学习 Toolbarheader布局部分 就是app最顶部的部分 他的显示与否&#xff0c;是与F:\androidProject\android_lear…

FPGA模块——以太网(1)MDIO读写

FPGA模块——以太网MDIO读写 MDIO接口介绍MDIO接口代码&#xff08;1&#xff09;MDIO接口驱动代码&#xff08;2&#xff09;使用MDIO驱动的代码 MDIO接口介绍 MDIO是串行管理接口。MAC 和 PHY 芯片有一个配置接口&#xff0c;即 MDIO 接口&#xff0c;可以配置 PHY 芯片的工…

在Portainer创建Nginx容器并部署Web静态站点实现公网访问

&#x1f525;博客主页&#xff1a; 小羊失眠啦. &#x1f3a5;系列专栏&#xff1a;《C语言》 《数据结构》 《Linux》《Cpolar》 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;…

Android: Ubuntu下交叉环境编译常用调试工具demo for lspci命令(ARM设备)

lspci命令交叉环境编译(ARM设备) 交叉编译工具下载&#xff1a; https://releases.linaro.org/components/toolchain/binaries https://releases.linaro.org/components/toolchain/binaries/6.3-2017.05/aarch64-linux-gnu/ lspci命令交叉环境编译(ARM设备)&#xff1a; 1&a…

算法训练营Day22

#Java #回溯 开源学习资料 Feeling and experiences&#xff1a; 进入到回溯算法的章节&#xff0c;在代码随想录中有详细的回溯算法理论基础 在此总结归纳&#xff1a; 刚开始接触到回溯时&#xff0c;看到了终止条件&#xff0c;递归调用.....等&#xff0c;发现了其与递…

vscode debug c++代码

需要提前写好CMakeLists.txt 在tasks.json中写好编译的步骤&#xff0c;即tasks&#xff0c;如cmake … 和make -j 在lauch.json中配置可执行文件的路径和需要执行tasks中的哪一个任务 具体步骤&#xff1a; 1.写好c代码和CMakeLists.txt 2.配置tasks.json 终端–>配置任务…

python画图【00】Anaconda和Pycharm和jupyter的使用

①Anaconda ②Pycharm 一、Anaconda安装步骤 1、双击安装包&#xff0c;点击next。 2、点我同意I agree 3、 4、选择需要安装的位置&#xff0c;位置可根据自己情况安装到具体位置&#xff0c;但要记住安装到了哪里。然后点击next 5、可选择加入到环境变量&#xff0c;…

深信服技术认证“SCSA-S”划重点:命令执行漏洞

为帮助大家更加系统化地学习网络安全知识&#xff0c;以及更高效地通过深信服安全服务认证工程师考核&#xff0c;深信服特别推出“SCSA-S认证备考秘笈”共十期内容&#xff0c;“考试重点”内容框架&#xff0c;帮助大家快速get重点知识~ 划重点来啦 *点击图片放大展示 深信服…

python:删除空白

删除字符串末尾的空白 例如&#xff0c;下面的代码&#xff0c;变量hobby指向的字符串在末尾有一个空格&#xff1a; 可以使用函数rstrip()删除字符串末尾的空格&#xff0c;如下&#xff1a; 因为删除字符串末尾的空格并没有赋值给原变量hobby&#xff0c;所以此时查看hobb…

mask rcnn训练基于labelme生成的数据集

1.下载mask rcnn源码 此处使用的mask rcnn源码来自于B站博主霹雳吧啦Wz 2.安装labelme sudo apt install python3-pyqt5 pip install labelme如果运行出现QT的错误&#xff0c;可能是与我一样遇到自己装了C版本的QT 解决&#xff1a;运行命令 unset LD_LIBRARY_PATH2.使用lab…

众和策略证券开户首选:股票增持是好还是坏?大股东增持规定?

股票增持是好仍是坏&#xff1f; 股东增持在一定程度上反映股东对个股比较看好&#xff0c;大量的买单&#xff0c;增加了市场上的多方力气&#xff0c;会推动股价上涨&#xff0c;是一种利好消息。 一般大股东会增持可能是上市公司运营成绩较好&#xff0c;具有较大的发展前…

SoapUI、Jmeter、Postman三种接口测试工具的比较分析!

前段时间忙于接口测试&#xff0c;也看了几款接口测试工具&#xff0c;简单从几个角度做了个比较&#xff0c;拿出来与诸位分享一下。本文从多个方面对接口测试的三款常用工具进行比较分析&#xff0c;以便于在特定的情况下选择最合适的工具&#xff0c;或者使用自己编写的工具…