CSS3动画常用贝塞尔曲线-效果演示

CSS与贝塞尔曲线

CSS3动画常用贝塞尔曲线实现更加自然,物理感的动画。

列举了一些常见的贝塞尔曲线数值,用于做动画的存档。

.a1{
  animation: stretch 1s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
}

.a2{
  animation: stretch 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) infinite;
}

.a3{
  animation: stretch 1s cubic-bezier(0.95, 0.05, 0.795, 0.035) infinite;
}

.a4{
  animation: stretch 1s cubic-bezier(0.19, 1, 0.22, 1) infinite;
}

.a5{
  animation: stretch 1s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
}

.a6{
  animation: stretch 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

.a7{
  animation: stretch 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
}

原文地址:https://www.cnblogs.com/linxue/p/11022443.html

时间: 2024-10-13 11:34:02

CSS3动画常用贝塞尔曲线-效果演示的相关文章

CSS3动画中的animation-timing-function效果演示

CSS3动画(animation)属性有如下几个: 属性 值 说明 animation-name name 指定元素要使用的keyframes名称 animation-duration time(ms.s) 指定动画时长 animation-timing-function linear.ease(默认).ease-in.ease-out.ease-in-out.cubic-bezier(n,n,n,n) 设置动画将如何完成一个周期 animation-delay time(ms.s) 设置动画启

二次、三次贝塞尔曲线demo(演示+获取坐标点)

二次贝塞尔曲线demo: See the Pen quadraticCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(二次) 推荐点击以上链接使用  三次贝塞尔曲线demo: See the Pen bezierCurveDemo by hanyanjun (@hanyanjun) on CodePen. 我的demo地址(三次) 推荐点击以上链接使用 二次.三次贝塞尔曲线demo(演示+获取坐标点)

css3动画——常用的贝塞尔曲线

最近在做css3动画的时候感觉默认的几种动画缓动效果已经不足够满足要求了,所以想起整理一下贝塞尔常用的一些曲线,用于以后使用 曲线参考:http://cubic-bezier.com/,http://easings.net/zh-cn# 常用的贝塞尔曲线如下: ps:并不是所有的缓动函数都有贝塞尔曲线,jquer 的easing的大部分是有的,但是变化比较剧烈的几种就没有了 $easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715); $easeOutSin

从Android动画到贝塞尔曲线

基础知识: 动画通过连续播放一系列画面,给视觉造成连续变化的图画.很通俗的一种解释.也很好理解.那么我们先来一个案例看看. 动画案例:百度贴吧小熊奔跑 效果: topic.gif 代码: <?xml version="1.0" encoding="utf-8"?> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:

用CSS3动画特效实现弹窗效果

提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了. CSS3特殊效果 CSS3为用户添加了三个特殊效果的处理方式:过渡.动画.变化.当用户和界面元素交互时,使用这些特殊样式可大大改善用户的体验效果.这些效果直接由浏览器引擎处理,可以节省开销.尽管如此,它们也会耗费大量的处理能力,尤其是一些复杂的WEB页面上.即使是最基本的效果,也是如此.本篇的目的只是熟悉下这三种CSS处理效果,不推荐在实际系统中大篇幅使用. 温馨提示:请谨慎大篇幅使用这些

HTML5 - 用CSS3动画制作场景切换效果(移动,旋转,淡入淡出等)

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>HTML5-页面切换动画</title> 6 <link href="animations.css" rel="stylesheet"> 7 <script src="modernizr.custom.js&q

贝塞尔曲线与CSS3动画、SVG和canvas的应用

简介 贝塞尔曲线是可以做出很多复杂的效果来的,比如弹跳球的复杂动画效果,首先加速下降,停止,然后弹起时逐渐减速的效果. 使用贝塞尔曲线常用的两个网址如下: 缓动函数:http://www.xuanfengge.com/easeing/easeing/ cubic-bezier:http://cubic-bezier.com/ 如何用贝塞尔曲线画曲线 一个标准的3次贝塞尔曲线需要4个点:起始点.终止点(也称锚点)以及两个相互分离的中间点. 无论SVG, Canvas还是CSS3动画,都牵扯到这4个

css3 贝塞尔曲线动画

上面图标初始加载的时候,呈:奇数从左上淡现,偶数车左下呈现. <div> <ul class="trantion" v-for="(item,index) in dataLI" @click="handelIdex(index)"> <li :class="'trantiones'+ (intx == index ? 'actives' : '')">{{item.name}}</li

CSS3动画那么强,requestAnimationFrame还有毛线用?

一.哟,requestAnimationFrame, 新同学,先自我介绍下 Hello, 大家好,我就是风姿卓越,万种迷人的requestAnimationFrame,呵呵呵呵.很高兴和大家见面,请多指教! .... 咳咳,大家不要一副不屑的样子嘛.跟你讲,我可是很有用的.所谓人如其名,看我名字这么长,表意为"请求动画帧",明摆着一副很屌的样子! ....按照这种说法,"樱桃小丸子"就是樱桃做的丸子咯,恩,看脑袋确实蛮像的~ .... 想到明天就是国庆大假,今天我就