CSS3 & transition & animation

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function


.circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
transition: 1s 0.5s all ease-in-out;
/* animation: autoRotate 1s 1 both ease; */
} .rotate-angle {
transform: rotate(var(--newAngle));
}

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation-timing-function



.circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
/*transition: 1s 0.5s all ease-in-out; */
animation: autoRotate 1s 1 both ease;
} .rotate-angle {
transform: rotate(var(--newAngle));
} @keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--defaultAngle));
}
to {
transform: rotate3d(0, 0, 1, var(--newAngle));
}
} @keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--beginAngle));
}
to {
transform: rotate3d(0, 0, 1, var(--endAngle));
}
}

full demo

@charset "UTf-8";

/* app.css */

:root{
--beginAngle: 0deg;
--endAngle: 0deg;
/* fixed angle enums */
--defaultAngle: 0deg;
--newAngle: 30deg;
/* positive */
--rotateAngle30: 30deg;
--rotateAngle60: 60deg;
--rotateAngle90: 90deg;
--rotateAngle120: 120deg;
--rotateAngle150: 150deg;
--rotateAngle180: 180deg;
--rotateAngle210: 210deg;
--rotateAngle240: 240deg;
--rotateAngle270: 270deg;
--rotateAngle300: 300deg;
--rotateAngle330: 330deg;
--rotateAngle360: 360deg;
/* negative */
--rotateAngle-30: -30deg;
--rotateAngle-60: -60deg;
--rotateAngle-90: -90deg;
--rotateAngle-120: -120deg;
--rotateAngle-150: -150deg;
--rotateAngle-180: -180deg;
--rotateAngle-210: -210deg;
--rotateAngle-240: -240deg;
--rotateAngle-270: -270deg;
--rotateAngle-300: -300deg;
--rotateAngle-330: -330deg;
--rotateAngle-360: -360deg;
} * {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
} html, body, div, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, object, code, legend, button, input, textarea, th, td, a, img, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
} .data-btn{
padding: 1px 6px;
border-width: 2px;
border-style: outset;
border-color: buttonface;
border-image: initial;
cursor: default;
} .circle-box{
position: relative;
margin: 100px auto;
width: 300px;
height: 300px;
background: #ccc;
border: 1px solid red;
border-radius: 50%;
transform: rotate(var(--defaultAngle));
transition: 1s 0.5s all ease-in-out;
/* animation: autoRotate 1s 1 both ease; */
} .rotate-angle {
transform: rotate(var(--newAngle));
} @keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--defaultAngle));
}
to {
transform: rotate3d(0, 0, 1, var(--newAngle));
}
} @keyframes autoRotate {
0% {
transform: rotate3d(0, 0, 1, var(--beginAngle));
}
to {
transform: rotate3d(0, 0, 1, var(--endAngle));
}
} .menus-mask {
position: absolute;
top: 230px;
left: 50%;
transform: translate(-50%);
width: 600px;
height: 400px;
background: rgba(123,123,123,0.5);
z-index: 999;
}
.horizontal-line{
position: absolute;
width: 50vw;
height: 0;
border-top: 1px solid red;
top: calc(100px + 300px / 2);
left: 50%;
transform: translateX(-50%);
} .vertical-line {
position: absolute;
width: 0;
height: calc(50vh + 300px /2 );
border-left: 1px solid red;
top: calc(100px / 2);
left: 50%;
transform: translateX(-50%);
} .circle {
/* position: absolute; */
width: 30px;
height: 30px;
line-height: 30px;
background: #f0f;
text-align: center;
vertical-align: middle;
cursor: pointer;
border-radius: 0 0 15px 15px;
}
/*
.circle::before {
content: "";
width: 6px;
height: 6px;
position: absolute;
left: 9px;
top: 0px;
border: 2px solid #FFF;
border-radius: 50%;
z-index: -1;
}
.circle::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
height: 30px;
width: 30px;
background-color: #00c991;
border-radius: 50% 50% 0;
transform: translate(-50%, -50%) rotate(45deg);
z-index: -1;
} */ .circle-highlight::after {
background-color: #f82eb5;
} .circle1{
transform: rotate(-60deg) translateX(-50px) translateY(35px);
}
.circle2{
transform: rotate(-30deg) translateX(calc(150px - 87px)) translateY(9px);
}
.circle3{
transform: rotate(0deg) translateX(calc(150px - 15px)) translateY(-73px);
}
.circle4{
transform: rotate(30deg) translateX(calc(150px + -13px)) translateY(-175px);
}
.circle5{
transform: rotate(60deg) translateX(80px) translateY(-255px);
}
.circle6{
transform: rotate(90deg) translateX(-15px) translateY(calc(-300px + 15px));
} .circle7{
transform: rotate(120deg) translateX(calc(-106px)) translateY(-243px);
}
.circle8{
transform: rotate(150deg) translateX(-155px) translateY(-150px);
}
.circle9{
transform: rotate(180deg) translateX(calc(-150px + 15px)) translateY(-45px);
}
.circle10{
transform: rotate(-150deg) translateX(-47px) translateY(35px);
}
.circle11{
transform: rotate(-120deg) translateX(77px) translateY(50px);
}
.circle12{
transform: rotate(-90deg) translateX(calc(195px)) translateY(-15px);
} .menus {
background: url("./menus.svg")
}

cubic-bezier

cubic-bezier(p1, p2, p3, p4)

An author defined cubic-Bezier curve, where the p1 and p3 values must be in the range of 0 to 1.

https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function#cubic-bezier-timing-function


.test{
transition-timing-function: cubic-bezier(.29, 1.01, 1, -0.68);
} .cb {
transition-timing-function: cubic-bezier(0.2,-2,0.8,2);
}

贝塞尔曲线

https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function

https://developer.mozilla.org/zh-CN/docs/Web/CSS/timing-function

https://en.wikipedia.org/wiki/Bézier_curve#Cubic_B.C3.A9zier_curves

repl online

https://cubic-bezier.com/#.17,.67,.83,.67

https://cubic-bezier.com/

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


CSS3 & transition & animation的更多相关文章

  1. css3 transition animation nick

    时光转眼即逝,又到周六了,今天写点某部分人看不起的css玩玩! 转换 转换属性transform: 浏览器前缀: -webkit-transform;-o-transform;-moz-transfo ...

  2. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  3. css3动画transition animation

    CSS动画简介  transition   animation transition过渡:css3通过transitions属性引入时间概念,通过开始.结束状态自动计算中间状态,实现状态改变的过渡效果 ...

  4. css3 transition属性

    最近打算学习css3知识,觉得css3写出来的效果好炫好酷,之前一直想要学习来着.可能之前的决心,毅力,耐心不够,所以想要重整起来,放下浮躁的心态,一步一个脚印,踏踏实实的来学习. 首先学习的是css ...

  5. Atitti css transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. Transition ...

  6. Atitti  css   transition Animation differ区别

    Atitti  css   transition Animation differ区别 1.1. transition的优点在于简单易用,但是它有几个很大的局限.  1 1.2. js 动态改变 st ...

  7. 【转】CSS3 transition规范的实际使用经验

    原文转自:http://blog.jobbole.com/56243/ 本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一 ...

  8. CSS3 transition规范的实际使用经验

    本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异,关于具体解决方法或如何规避问题的意见可以参考另一篇非常有见地的文章,“All You Need to Know Abou ...

  9. css 动画 transform transition animation

    1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0 ...

随机推荐

  1. vscode远程开发安装

    https://www.cnblogs.com/xiaoqi/p/vs-code-remote.html ============================= https://blog.csdn ...

  2. TCP/IP建立连接的时候ISN序号分配问题

    初始建立TCP连接的时候的系列号(ISN)是随机选择的,那么这个系列号为什么不采用一个固定的值呢?主要有两方面的原因 防止同一个连接的不同实例(different instantiations/inc ...

  3. .Net 5 C# 泛型(Generics)

    这里有个目录 什么是泛型? 后记 什么是泛型? 我们试试实现这个需求,给一个对象,然后返回 另一个同样的对象,先不管这个实用性,我们实现看看 首先是int型 private int Get(int a ...

  4. LOJ10077

    题目描述给出一个 N 个顶点 M 条边的无向无权图,顶点编号为 1∼N.问从顶点 1 开始,到其他每个点的最短路有几条. 输入格式第一行包含 2 个正整数 N,M,为图的顶点数与边数. 接下来 M行, ...

  5. Language Guide (proto3) | proto3 语言指南(开篇)

    前言 近日在学习gRPC框架的相关知识时接触到Protobuf(protocol-buffers,协议缓冲区),proto3等知识.网上很多文章/帖子经常把gRPC与proto3放在一起,为避免初学者 ...

  6. HaspMap源码分析(JDK 1.8)

    底层结构分析 上面这两张图分别画出了JDK 1.7.1.8底层数据结构,在JDK 1.7.1.8中都使用 了散列算法,但是在JDK 1.8中引入了红黑树,在链表的长度大于等于8并且hash桶的长度大于 ...

  7. JAVA对象分析之偏向锁、轻量级锁、重量级锁升级过程

    在HotSpot虚拟机里,对象在堆内存中的存储布局可以划分为三个部分: 对象头(Header) 实例数据(Instance Data) 对齐填充(Padding). 对象头 HotSpot虚拟机(后面 ...

  8. 浅谈Winform控件开发(一):使用GDI+美化基础窗口

    写在前面: 本系列随笔将作为我对于winform控件开发的心得总结,方便对一些读者在GDI+.winform等技术方面进行一个入门级的讲解,抛砖引玉. 别问为什么不用WPF,为什么不用QT.问就是懒, ...

  9. POJ 1743 Musical Theme【SAM】

    POJ1743 Musical Theme 要找长度\(\ge 5\)且出现次数\(\ge 2\)并且第一次出现和最后一次出现不重叠的最长子串. 题目条件中,如果对于两个串,在一个串的每个数上都加上相 ...

  10. 【noi 2.6_9289】Ant Counting 数蚂蚁{Usaco2005 Nov}(DP)

    题意:有M个家族的蚂蚁,各Ni只(互相相同).问选出 l~r 只的不同方案数. 解法:很基础的一种DP,不要被"排列组合"所迷惑了啊~我之前接触过这个类型,可惜又忘了,一定要记住! ...