[TypeStyle] Use TypeStyle keyframes to create CSS animations
We cover CSS keyframes and how to create them using TypeStyle. We then show how to use the keyframes function to create an animation. We also discuss a few other CSS properties in the animation
namespace.
import {style, keyframes, classes} from 'typestyle';
import * as React from 'react';
import * as ReactDOM from 'react-dom'; const fadeAnimationName = keyframes({
from: {opacity: 0},
to: {opacity: 1}
});
const fadeAnimationClassName = style({
animationName: fadeAnimationName,
animationDuration: '2s'
}); const coloringAnimationName = keyframes({
'0%': {color: 'black'},
'50%': {color: 'pink'},
'100%': {color: 'red'}
});
const fontColoringAnimationClassName = style({
fontSize: '20px',
animationName: coloringAnimationName,
animationDuration: '2s',
animationIterationCount: 'infinite'
}); const App = () => (
<div className={classes(
fadeAnimationClassName,
fontColoringAnimationClassName
)}>
Hello World!
</div> ); ReactDOM.render(
<App />,
document.getElementById('root')
);
[TypeStyle] Use TypeStyle keyframes to create CSS animations的更多相关文章
- 【翻译】CSS Animations VS the Web Animations API:案例学习
原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...
- 'Attempt to create two animations for cell' iOS
我是在对一个UITableView 一起进行 reloadRows和reloadSections 的操作的时候 出现的
- 【转】Styling And Animating SVGs With CSS
原文转自:http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/?utm_source=CSS- ...
- AngularJS学习--- 动画操作 (Applying Animations) ngAnimate step 12
1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图时,会有一个很明显的从下向上的动画过程. 3.代码实现: step11和step12之间的 ...
- Styling FX Buttons with CSS
http://fxexperience.com/2011/12/styling-fx-buttons-with-css/ ——————————————————————————————————————— ...
- 动画操作 (Applying Animations) ngAnimate12
动画操作 (Applying Animations) ngAnimate step 12 1.切换目录 git checkout step-12 npm start 2.效果图 这里在点击右边的缩略图 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- 前端开发必备 40款优秀CSS代码编写工具推荐
摘要:CSS工具可以简化工作流,可以提高CSS编写速度,是开发者和设计者所不可缺少的.本文列举了40种CSS工具,功能涉及CSS菜单.动画.3D图形.响应式页面.图层.按钮等界面元素的设计与制作,你定 ...
- CSS特效汇集
http://www.lanrenzhijia.com/js/css3/ http://js.mobanwang.com/special/allcss/ 其他效果:http://www.cnblogs ...
随机推荐
- JS面向对象:
面向对象:--JS系统对象也是基于原型的程序--不要修改或者添加系统对象下面的方法和属性eg: var arr = [1,2,3]; Array.prototype.push = function() ...
- shutdown---系统关机
shutdown命令用来系统关机命令.shutdown指令可以关闭所有程序,并依用户的需要,进行重新开机或关机的动作. 语法 shutdown(选项)(参数) 选项 -c:当执行“shutdown - ...
- 【试水CAS-4.0.3】第07节_CASclient配置单点登录
完整版见https://jadyer.github.io/2015/07/26/sso-cas-client-login/ 本文源代码下载:http://download.csdn.net/detai ...
- 10小时之内,暴力破解SSH账号的IP
10小时之内,暴力破解SSH账号的IP,IP 地址数据来源于 ip138.com 182.18.76.246 北京市昌平区 北京亿安天下网络科技有限公司 联通 221.223.200.143 北京市 ...
- Maven中央仓库信息速查
http://maven.outofmemory.cn/
- 73.fseek与宽字符读取文件
fseek //文件路径 ] = "1.txt"; //FILE *pf = fopen(path, "a+");//尾部添加,文件指针在尾部 //FILE * ...
- 转一篇对EJB理解的文章
1. 我们不禁要问,什么是"服务集群"?什么是"企业级开发"? 既然说了EJB 是为了"服务集群"和"企业级开发",那么 ...
- windows新建或者重命名文件及文件夹必须手动刷新才能显示出来
平台:win8.1 问题:windows新建或者重命名文件及文件夹必须手动刷新才能显示出来 解决方法: 注册表中HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\ ...
- BZOJ4196: [Noi2015]软件包管理器(树链剖分)
Description Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安装某一个软件包,然后软件包管理器会帮助你从软件源下载软件包,同时自动解决所有的依赖( ...
- MyBatis学习总结(12)——Mybatis+Mysql分页查询
package cn.tsjinrong.fastfile.util; /** * @ClassName: Page * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...