CSS旋转动画和动画的拼接
旋转动画
第一个样式:
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
第二个样式:
.icon {
color: #f5222d;
animation: rotating 1.8s linear infinite;
animation-fill-mode: forwards;
display: inline-block;
i {
font-size: 60px;
}
}
HTML代码
<div class="icon">
<i class="iconfont iconloading"></i>
</div>
linear是匀速运动,还可以设置为:
ease 默认。动画以低速开始,然后加快,在结束前变慢。
ease-in 动画以低速开始。 测试
ease-out 动画以低速结束。 测试
ease-in-out 动画以低速开始和结束。 测试
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
infinite是无限次播放的意思,这里也可以写个数字,来控制播放几次;
动画的拼接
keyframes样式
@keyframes dropDown {
0% {
transform: translate(0px, -120px);
opacity: 0;
}
100% {
transform: translate(0px, 0px);
opacity: 1;
}
}
@keyframes popUp {
0% {
transform: translate(0px, 0px);
opacity: 1;
}
100% {
transform: translate(0px, -120px);
opacity: 0;
}
}
元素样式
.appTip {
animation-name: dropDown, popUp;
animation-duration: 800ms, 800ms;
animation-delay: 0ms, 3200ms;
animation-timing-function: ease, ease;
animation-iteration-count: 1, 1;
animation-fill-mode: forwards, forwards;
}
animation-name可以设置两个(或多个)keyframes名;
后面的样式属性都是按照两个(或多个)keyframes来配置的;
只要把animation-delay配置好,就可以完美实现动画拼接了;
CSS旋转动画和动画的拼接的更多相关文章
- CSS 实现加载动画之二-圆环旋转
上次简单的介绍了下如何用代码实现菊花旋转的加载动画,动画点击,这次继续我们的动画系列,实现另外一种加载动画,圆环旋转.与上次不同的是,菊花旋转是通过改变元素透明度来实现动画,这次因为考虑到元素叠加,加 ...
- 用css3制作旋转加载动画的几种方法
以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android.最近在开发一个移动平台的web app,那么就有机会 ...
- 纯css实现苹果表盘动画
欢迎訪问我们的博客:http://www.w3ctrain.com/2015/07/06/Apple-Watch-Dials/ 随着苹果表的大量生产,我想.用CSS来实现拨号动画的时候到了. 在这篇文 ...
- 前端案例分享(一):CSS+JS实现流星雨动画
目录 引言 1.效果图 2.源码 3.案例解析 4.小问题 5.结语 引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析. 所 ...
- CSS+JS实现流星雨动画
引言 平常会做一些有意思的小案例练手,通常都会发到codepen上,但是codepen不能写分析. 所以就在博客上开个案例分享系列,对demo做个剖析.目的以分享为主,然后也希望各路大神 ...
- CSS过渡效果transition和动画
一.过渡效果 可以在不适用Flash和js 的情况下实现过渡效果 属性 描述 transition 简写属性,用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的c ...
- css吃豆人动画
一. Css吃豆人动画 1. 上半圆:两个div,内部一个圆div,外部设置宽高截取半圆 外部div动画:animation: 动画样式 1s(时长) ease(动画先低速后快速) infinite( ...
- 纯CSS实现3D正方体动画效果
前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图
- CSS 3学习——animation动画
以下内容根据官方文档翻译以及自己的理解整理. 1. 介绍 本方案介绍动画(animations).通过动画,开发者可以将CSS属性值的变化指定为一个随时间变化的关键帧(keyframes)的集合.在 ...
- css动画,css过度,js动画
1jQuery动画 语法a$(selector).animate(styles,options) 语法b$(selector).animate(styles,speed,easing,callback ...
随机推荐
- PHP Loser 说说做前端需要如何进一步学习
PHP Loser 说说做前端需要如何进一步学习 做前端的,需要如何进一步学习?书籍这个事情贵精不在多,我这里推荐两本即可: <javascript教程 高级程序设计> <CSS权威 ...
- 斐波那契数列(Java)
一.什么是斐波那契数列 斐波那契数列(Fibonacci sequence),又称黄金分割数列.因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为& ...
- kaldi简介及安装
操作系统 : Ubuntu18.04_x64 gcc版本 :7.4.0 简介 Kaldi诞生于2009年的JohnsHopkins University,刚开始项目重点是子空间高斯模型(SGMM)建模 ...
- Linux下MySQL数据库的my.cnf配置文件,解决中文乱码问题
系统 CentOS 7.7 MySQL - 5.7.28文件放置目录:/etc/文件权限:644解决问题:存储中文数据乱码 # For advice on how to change settings ...
- .NET轻松实现支付宝服务窗网页授权并获取用户相关信息
前言: 最近在开发一个商业街区的聚合扫码支付功能,其中需要用到的有支付宝,微信两种支付方式,当然对于开发微信支付而已作为自己的老本行已经比较熟悉了,然而对于我来说支付宝支付还是头一次涉及到.这次项目中 ...
- spring常用注解整理
参看大佬博客https://www.cnblogs.com/xiaoxi/p/5935009.html
- Oracle数据库之第四篇
/* 授权命令 grant 权限 to 用户 授权可以授予多个权限 grant connect,resource to baidu 收回权限 revoke 权限 from 用户 revoke dba ...
- 【Gradle】Java Gradle 插件
Java Gradle 插件 如何应用 apply plugin:'java' Java插件约定的项目结构 Project |--build.gradle |--src |--main |--java ...
- Thymeleaf常用语法:数据延迟加载
在处理模板时,可以由模板逻辑决定是否加载数据,以提高性能.在Spring Boot控制器中设置数据时,使用LazyContextVariable可以实现这功能. 开发环境:IntelliJ IDEA ...
- RHEL 6.6配置网易CentOS镜像的yum源小结
之前没有使用过网易CentOS镜像的yum源,最近由于需要,遂在一台测试服务器验证.测试了一下如何配置使用网易的Cent0S的yum源.此文仅仅是笔记性质,参考了网上大量资料(文末"参 ...