[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: 0; 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: 0; 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;}
}

原文地址:https://www.cnblogs.com/Answer1215/p/10362856.html

时间: 2024-11-11 13:53:05

[CSS3] Make a One-time CSS Animation that Does Not Revert to its Original Style的相关文章

CSS Animation 属性

一.animation是CSS3中新增的属性,它可以制作出多种酷炫的动画效果,如果对flash有一定的了解,那这个属性就会很容易学习. 先展示一下简单的动画效果 __ __O 二.下面就来了解一下animation的具体属性. 1.动画名称 1 /*1.name:动画名称*/ 2 /*-webkit-animation-name: kf_play;*/ 3 /*-moz-animation-name: kf_play;*/ 4 /*-o-animation-name: kf_play;*/ 5

css animation关于step

animation-timing-function animation-timing-function 规定动画的速度曲线.速度曲线定义动画从一套 CSS 样式变为另一套所用的时间.在平常的取值中,主要有以下几个: 值 描述 linear 动画从头到尾的速度是相同的. ease 默认.动画以低速开始,然后加快,在结束前变慢. ease-in 动画以低速开始. ease-out 动画以低速结束. ease-in-out 动画以低速开始和结束. cubic-bezier(n,n,n,n) 在 cub

CSS Animation

1 div { 2 /* Chrome, Safari, Opera 等使用webkit引擎的浏览器*/ 3 -webkit-animation-name: myfirst; /*规定 @keyframes 动画的名称.*/ 4 -webkit-animation-duration: 5s; /*规定动画完成一个周期所花费的秒或毫秒.默认是 0.*/ 5 -webkit-animation-timing-function: linear;/*设置动画的速度曲线,默认是 "ease".*

css3動畫庫Animate.css

第一次寫博客,第一次,好緊張,哈哈.不說廢話了,進入正題. 最近做了個網站,領導說效果要做的炫一點.於是就想到了css3的animation了.誰說效果還是挺簡單的,但第一次寫,也廢了一些時間. http://xujk.cc/y1y/page2.html (大屏幕慘不忍睹= =!!!) 後來感覺有點費時間,網上找了一下,有現成的動畫庫 Animate.css,果斷下載,下次可以直接用了,哈哈! 下載地址 :http://daneden.github.io/animate.css/ 我的demo

CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是Web前端开发员,用CSS3做一些过渡效果和动画,并不比运用JS脚本实现要好(个人认为:用CSS只不过让不懂JS的人员(设计人员)也能做动画,而且使用浏览器封装好的方法,但使用JS脚本可以更灵活,在性能上也能去优化). 1.Transition Transition是一种直观上的效果,让DOM元素的某个

CSS3新增的常用方法以及CSS常见属性整理

CSS 用于控制网页的样式和布局,而CSS3 是最新的 CSS 标准. CSS3的规范仍在开发中,有些CSS3并不能完美兼容所有浏览器. CSS3被拆分为"模块".旧规范已拆分成小块,还增加了新的. 一些最重要CSS3模块如下: 选择器 盒模型 背景和边框 文字特效 2D/3D转换 动画 多列布局 用户界面 CSS3选择器 添加了关系型选择器.属性选择器.伪元素选择器.伪类选择器等等新的选择器.   可以更精准的筛选元素.CSS3选择器 CSS3边框 CSS3中可以为元素创建圆角边框,

css3复杂选择器+内容生成+Css Hack

1.复杂选择器2.内容生成3.多列4.CSS Hack(浏览器兼容性)=======================================1.复杂选择器 1.兄弟选择器 1.特点: 1.通过位置关系来匹配元素(平级) 2.只能向后找,不能向前找 2.兄弟选择器-相邻兄弟选择器 1.什么是相邻兄弟 紧紧挨在一起的元素,称之为相邻兄弟 <div id="d1"></div> <p id="p1"></p> <

css animation和keyframes

keyframes应用在animation上,animation应用在元素上. <html> <style type="text/css"> .div1 { width:100px;height:100px;border:1px solid #000;position:relative; animation : move 800ms ease-out infinite alternate; } @keyframes move { from {top:0px;}

CSS3的过渡效果(transition)与动画(animation)

1.Transition Transition是一种直观上的效果,让DOM元素的某个属性在固定时间内从一旧值到一新值.目前Firefox.Opera.Safari和Chrome都支持transition ,IE还不支持. 语法:transition: property duration timing-function delay; transition-property  指定的要改变的css属性名称 transition-duration 指定过度效果要花多少时间(s/ms) transiti