In this lesson, we learn how to handle CSS keyframe animations in styled-components, via the 'keyframes' helper.

import React from "react";
import styled, { keyframes } from "styled-components"; const morph = keyframes`
% { border-radius: 5px; }
% { border-radius: %; }
% { border-radius: 5px; }
`; const spin = keyframes`
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
`; const Ball = styled.div`
width: 64px;
height: 64px;
border-radius: %;
margin: auto;
background-color: #08aeea;
background-image: linear-gradient(0deg, #08aeea %, #2af598 %);
animation: ${morph} 1s linear infinite, ${spin} 1s ease-in-out infinite;
`; const App = () => <Ball />; export default App;

[React] Animate your user interface in React with styled-components and "keyframes"的更多相关文章

  1. React学习笔记-1-什么是react,react环境搭建以及第一个react实例

    什么是react?react的官方网站:https://facebook.github.io/react/下图这个就是就是react的标志,非常巧合的是他和我们的github的编辑器Atom非常相似. ...

  2. [React] Intro to inline styles in React components

    React lets you use "inline styles" to style your components; inline styles in React are ju ...

  3. React系列(一):React入门

    React简介 1.由来 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. 2.React的优势 解决大规模项目开发中数据 ...

  4. React Native是一套使用 React 构建 Native app 的编程框架

    React Native是一套使用 React 构建 Native app 的编程框架 React Native at first sight what is React Native? 跟据官方的描 ...

  5. react.js 从零开始(七)React (虚拟)DOM

    React 元素 React 中最主要的类型就是 ReactElement.它有四个属性:type,props,key 和ref.它没有方法,并且原型上什么都没有. 可以通过 React.create ...

  6. 如何使用TDD和React Testing Library构建健壮的React应用程序

    如何使用TDD和React Testing Library构建健壮的React应用程序 当我开始学习React时,我努力的一件事就是以一种既有用又直观的方式来测试我的web应用程序. 每次我想测试它时 ...

  7. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  8. React入门介绍(2)- React Component-React组件

    React Component-React组件 允许用户自由封装组件是React非常突出的特性,用户可将自己创建的组件像普通的HTML标签一样插入页面,React.CreateClass方法就是用来创 ...

  9. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

随机推荐

  1. vue抽取公共方法———方法一

    方法一:Vue插件 1.概述 作用:满足vue之外的需求,特定场景的需求 比如说,让你在每个单页面组件里,都可以调用某个方法(公共方法),或者共享某个变量等 2.使用方法 [声明插件]- [写插件]- ...

  2. Struts2的token标签

    “token标签的实现原理是在表单中增加一个隐藏域,每次加载该页面时,该隐藏域的值都不相同.而TokenInterceptor拦截器则拦截所有用户请求,如果两次请求时该token对应隐藏域的值相同(前 ...

  3. 使用Spring Mvc 转发 带着模板 父页面 之解决方法 decorators.xml

    周末了,周一布置的任务还没完毕,卡在了页面跳转上,接手了一个半截的项目要进行开发,之前没有人给培训.全靠自己爬代码,所以进度比較慢.并且加上之前没实用过 Spring Mvc 开发项目.所以有点吃力, ...

  4. 【Tika基础教程之中的一个】Tika基础教程

    一.高速入门 1.Tika是一个用于文本解释的框架.其本身并不提供不论什么的库用于解释文本,而是调用各种各样的库,如POI,PDFBox等. 使用Tika.能够提取文件里的作者.标题.创建时间.正文等 ...

  5. LightOJ 1070 Algebraic Problem (推导+矩阵高速幂)

    题目链接:problem=1070">LightOJ 1070 Algebraic Problem 题意:已知a+b和ab的值求a^n+b^n.结果模2^64. 思路: 1.找递推式 ...

  6. amaze ui和bootstrap有哪些差别?

    amaze ui和bootstrap有哪些差别? 问题 我最近在学amaze ui,感觉如果单从功能性来看和bootstrap最大差别也就是扁平化,不过妹子ui号称对国产本土化支持更好,这个具体表现在 ...

  7. LinkCutTree详解

    LCT详解 没有比这再详细的了, 相信我

  8. java接口理解(转载)

    今天和同事好好的讨论了java接口的原理和作用,发现原来自己的对接口的理解仅仅是局限在概念的高度抽象上,觉得好像理解了但是不会变化应用其实和没有理解差不多.以前看一个帖子说学习一个东西不管什么时候都要 ...

  9. 使用dockerfile构建镜像(docker build)

    Docker buidl .  找出当前文件夹下的Docker build文件名的文件 Docker build -t  centos(镜像名) . 在当前目录下找centos的镜像文件 Docker ...

  10. 车牌识别--S5PV210測试第二次优化

    优化: 1.RGB转HSV 浮点运算改成定点运算: 2.匹配模板由图片改成C语言数组: 3.优化測试BMP车牌图片读取(两层for循环改为一层for循环). 总体相比优化之前时间降低110ms左右. ...