[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style
We'll add animation to patio11bot using CSS keyframes
. When defining a CSS animation, you can add it to a class with animation-name
, set the duration with animation-duration
, and if you want the animation to 'stick' on the end state, add animation-fill-mode: forwards; If don't set mode 'forwards' css will reset to original state.
.show-user-question {
display: block;
animation-name: showuserquestion;
animation-duration: 1s;
animation-fill-mode: forwards;
} @keyframes showuserquestion {
from { height:; opacity: 0.0; }
to { height: 60px; opacity: 1.0; }
} .show-user-answer {
display: inline-block;
overflow: hidden;
position: relative;
animation-name: showuseranswer;
animation-duration: 1s;
animation-fill-mode: forwards;
} @keyframes showuseranswer {
from {left: 60vw; opacity: 0.0;}
to {left:; opacity: 1.0;}
} .hide-input {
animation-name: hideinput;
animation-duration: 1s;
animation-fill-mode: forwards;
} @keyframes hideinput {
from {opacity: 1.0;}
to {opacity: 0.0;}
}
[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style的更多相关文章
- CSS魔法堂:更丰富的前端动效by CSS Animation
前言 在<CSS魔法堂:Transition就这么好玩>中我们了解到对于简单的补间动画,我们可以通过transition实现.那到底多简单的动画适合用transtion来实现呢?答案就是 ...
- No.6 - 利用 CSS animation 制作一个炫酷的 Slider
*{ margin:; padding:; } div{ margin: auto; width: 800px; height: 681px; position: relative; overflow ...
- 利用 CSS animation 和 CSS sprite 制作动画
CSS3 大大强化了制作动画的能力,但是如果要做出图案比较复杂的动画,选择 GIF 依然是一个不错的选择.今天给大家介绍一个使用 CSS animation 配合雪碧图(CSS sprite)来制作动 ...
- Apple CSS Animation All In One
Apple CSS Animation All In One Apple Watch CSS Animation https://codepen.io/xgqfrms/pen/LYZaNMb See ...
- css3中动画(transition)和过渡(animation)详析
css3中动画(transition)和过渡(animation)详析
- CSS Animation triggers text rendering change in Safari
薄荷新首页上周五内测,花哥反馈在 MacBook Safari 浏览器下 鼠标移动到第一个商品的时候后面几个商品的文字会加粗.这是什么鬼??? 待我回到家打开笔记本,鼠标蹭蹭蹭的发现问题远不止如此: ...
- CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)
CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...
- 百度前端技术学院2018笔记 之 利用 CSS animation 制作一个炫酷的 Slider
前言 题目地址 利用 CSS animation 制作一个炫酷的 Slider 思路整理 首先页面包含三种东西 一个是type为radio的input其实就是单选框 二是每个单选框对应的label 三 ...
- css animation @keyframes 动画
需求:语音播放动态效果 方案:使用如下图片,利用 css animation @keyframes 做动画 html <span class="horn" :class=& ...
随机推荐
- ejs模板在express里的默认文件夹路径修改
默认的是这句: app.set('view engine','ejs') ===>/views文件夹 我想要变成/websong app.set('views','webosg'); app.s ...
- 京东前端:PhantomJS 和NodeJS在网站前端监控平台的最佳实践
1. 为什么需要一个前端监控系统 通常在一个大型的 Web 项目中有很多监控系统,比如后端的服务 API 监控,接口存活.调用.延迟等监控,这些一般都用来监控后台接口数据层面的信息.而且对于大型网站系 ...
- (7) go 函数
1.格式 调用 2.包 (1)包 本质 文件夹.每一个文件都必须属于一个包 (2)给包取别名 (3)函数的首字母大小,决定是否能被外包访问 (3) 3.多返回值 4.递归 5.基本数据类型和数组都是拷 ...
- RedisDesktopManager-0.9.3 for windows (转)
redis数据库的可视化工具 官方出了RedisDesktopManager-0.9.8版本后要购买了.之前自用的Windows版本0.9.3.817有需要的可以使用.解压直接启动即可.主要以备自用! ...
- Flask实战第51天:cms添加轮播图后端代码逻辑完成
首先,我们需要给轮播图设计一张表,因为轮播图前端要展示,CMS要管理,所以我们在apps下新建个models.py 编辑apps.models.py from exts import db from ...
- RabbitMQ (十四) 普通集群
上篇文章把单机集群搭建好了,可以开始验证普通集群的相关功能了. 我们首先在管理后台(15672,15673 都可以)添加一个用户,并用新用户登录,添加一个虚拟主机 由于是在一台机器上模拟集群,所以我们 ...
- poj 1298(水题)
The Hardest Problem Ever Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 24241 Accept ...
- 【20181019T1】加密【逆元+位运算】
题面 [错解] 可能要逆推 <<就是乘法,好做 但^是什么东西? 欸暴力map70分,索性妥协 [正解] 注意^是自己异或上自己右移,前i位就是t的前i位 往后推就好 代码
- [AGC012E]Camel and Oases
题意:有$n$个数轴上的绿洲,给定它们的坐标,有一只骆驼想要访问所有绿洲,当它的驼峰容量为$V$时,它可以走到和当前绿洲距离$\leq V$的绿洲,并可以继续走,它也可以用一次跳跃到达任意一个绿洲,只 ...
- 【KMP】BZOJ3942-[Usaco2015 Feb] Censoring
[题目大意] 有一个S串和一个T串,长度均小于1,000,000,设当前串为U串,然后从前往后枚举S串一个字符一个字符往U串里添加,若U串后缀为T,则去掉这个后缀继续流程.输出最后的S串. [思路]三 ...