详解Css3新特性应用之过渡与动画


Posted in HTML / CSS onJanuary 10, 2017

一、缓动效果

学习和利用贝塞尔曲线,默认支持ease,ease-in,ease-out,ease-in-out和linear等

还提供一个cubic-beizer自定义贝塞尔曲线的起点和终点

Css中只支持一条贝塞尔曲的运动,不能连续多段

对cubic-beizer中控制锚点的水平坐标与垂直坐标互换,就可以得到任何调整函数的反向版本 cubic-beizer(.1,.25,1,.25)是ease的反向调整函数 水平坐标只能在0~1的范围内,因为水平坐标表示的是时间垂直坐标可以超过此范围,表示为运动距离

示例代码

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes bounce{
            60%, 80%, to{
                transform: translateY(350px);
                animation-timing-function: ease-out; /*加速*/
            }
            70%{ transform: translateY(250px); }
            90%{ transform: translateY(300px) }
        }
        .ball{
            display: inline-block;
            animation: bounce 3s ease-in; /*减速*/
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: red;
        }
        @keyframes bounceEase{
            60%, 80%, to{
                transform: translateY(400px);
                animation-timing-function: ease;
            }
            70% { transform: translateY(300); }
            90% { transform: translateY(350px); }
        }
        .ball02{
            display: inline-block;
            animation: bounceEase 3s cubic-bezier(.1,.25,1,.25);/*反向ease*/
            margin-left: 60px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="ball">
    </div>
    <div class="ball02"></div>
</body>

详解Css3新特性应用之过渡与动画

利用过渡(transition)实现

但需要注意transition-property默认值为all,所有可以过渡的属性都会被过滤

示例代码:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style> 
        input:not(:focus) + .callout{
            transform: scale(0); 
            transition-duration: .25s; /*覆盖默认的.5s时间*/ 
            transition-property: transform; /*只过渡transform属性,不过滤背景等其他属性*/
        } 
        .callout{ 
            transition: .5s cubic-bezier(.25,.1,.3,1.5); /*光标输出input时,有动画*/  
            transition-property: transform;/*只过渡transform属性,不过滤背景等其他属性*/
        }
        input{
            display: block;
        }
        .callout{
            background: #fed; 
            position: absolute;
            max-width: 14em;
            padding: .6em, .8em;
        }
    </style>
</head>
<body>
    <label>
        Your name:
        <input type="text" id="username" />
        <span class="callout">Only letters,number,underscores and hyphens allowed</span>
    </label>
</body>

详解Css3新特性应用之过渡与动画

二、逐帧动画

animation-timing-function中的steps函数,主要用他实现帧动画,他是一个阶跃函数,共两个参数 参数一:一个数字,代表时间函数中的间隔数量(必须为正数) timing-function是作用于每两个关键帧之间,而不是整个动画过程

参数二:接受start和end两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认end,step-start和step-end分别是steps(1,start)和steps(1,end)的简写

示例代码:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes loader{
            to{ background-position: -128px 0; }
        }
        .wrap{
            background: url("../img/frameAnimate.png") no-repeat;
            width: 32px;
            height: 50px; 
            background-position: 0px 0px;
            animation: loader 1s infinite steps(4);
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>

三、闪烁效果

实现两种闪烁效果,一是平滑闪烁,另一种是帧闪烁(更接近于现实)

平滑闪烁

主要是利用animation-iteration-count和animation-direction两个属性实现。 

1.animation-iteration-count:表示动画的执行次数 

2.animation-direction:表示动画是否应该轮流反向播放动画,如果值为alternate时,animation-iteration-count必须是一个偶数,因为是奇数正常播放,偶数反向播放

代码如下:

<style>
    @keyframes blink-smooth{
        to{ color: transparent; }
    }
    .wrap{
        animation: 1s blink-smooth;
        animation-iteration-count: 6;
        animation-direction: alternate;
    }
</style>
<div class="wrap">我是平滑的显示和隐藏三次</div>

帧闪烁

利用animation-timing-function属性的steps实现,因steps指定两个关键帧之间分成几个片段执行动画

1.animation-timing-function: steps(1),然后配合上动画在50%实现一个透明即可

代码如下:

<style>
    @keyframes blink-smooth02{
        50% { color: transparent; }
    }
    .wrap02{
        animation: 1s blink-smooth02;
        animation-iteration-count: 3;
        animation-timing-function: steps(1);
    }
</style>
<div class="wrap">我是逐帧的显示和隐藏三次</div>

详解Css3新特性应用之过渡与动画

四、打字效果(只支持单行英文)

需要利用用下特性:

1.等宽字体,然后加上ch这个单位,ch是表示'0'这个字符的宽度.

2.使用动画让元素宽度从0变到最大宽度。

3.利用steps(1)让每个关键帧的地方产生动画 代码如下:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes typing {
            from{ width: 0; }
        }
        @keyframes cart{
            50%{ border-color: currentColor; } /*利用steps在关键帧位置发生动画实现*/
        }
        .wrap{
            width: 14ch;
            animation: typing 8s steps(14) , cart 1s steps(1) infinite;
            white-space: nowrap;
            overflow: hidden;
            border-right:1px solid transparent;
            font-family: Courier New, Courier, monospace;
        }
    </style>
</head>
<body>
    <div class="wrap">Css is awesome</div>
</body>

详解Css3新特性应用之过渡与动画

五、状态平滑的动画

利用animation-play-state属性实现动画的暂停和播放功能,以及改变背景的定位。示例代码如下:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes mic{
            to{ background-position: 100% 0; }    
        }
        .wrap{
            background: url("../img/cat.png");
            background-repeat: no-repeat;
            background-size: auto 100%;
            width: 100px;
            height: 200px;
            animation: mic 5s linear infinite alternate; /*直线运动,永不停止,偶数反向运动*/
            animation-play-state: paused;
        }
        .wrap:hover, .wrap:active{
            animation-play-state: running;
        }
    </style>
</head>
<body>
    <div class="wrap"></div>
</body>

详解Css3新特性应用之过渡与动画

六、沿环型路径平移的动画

这点很重要,transform中的变形函数(如:rotate,transflate等)都是会影响元素整个坐标系统。也就是说rotate旋转的时候是旋转的整个坐标系统。这是实现用一个元素沿环弄路径平移的基础。原理图如下:

详解Css3新特性应用之过渡与动画

两个元素方案,transform-origin + rotate可以实现,但html结构需要两个元素,如下代码:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        @keyframes spin{
            to{ transform: rotate(1turn); } /*顺时针旋转360*/
        }
        @keyframes spin-reverse{
            from{ transform: rotate(1turn); } /*逆时针旋转360*/
        }
        .wrap{
            width: 300px;
            height: 300px;
            background: yellow;
            border-radius: 50%;
            overflow: hidden;
            padding: 20px; /*加大窗口的宽和高,利用背景从边框开始的原理,让运动图片与边框有一定的距离*/
        }
        .spin{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0px auto; /*运行元素居中*/
            animation: spin 5s infinite linear;
            transform-origin: 50% 150px; /*定位变换的原点*/
        }
        .spin > img{
            width: inherit;
            height: inherit;
            animation: spin-reverse 5s infinite linear;
            --animation: inherit;
            --animation-direction: reverse; /*由于动画会控制整个元素+元素内部的元素一起动画,所以内部的元素要反向动画*/
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="spin">
            <img src="../img/cat.png" alt="" />
        </div>
    </div>
</body>

说明:

1..spin的transform-origin: 50% 150px;是进行变换原点的定位;

2.由于需要实现spin环形运动,transform本质特性是元素+元素内部子元素都要随着变换,因此需要对img元素进行反向变形

3.实现两种反向变形的方式:A:写一个反向变形动画;B:继承父级的动画,用animation-direction指定位reverse进行反向。

单个元素方案,利用translate和rotate(多次利用),html结构只有一层,代码如下:

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*反向旋转必须有,不然位置不对*/
        @keyframes spinc{
            from{
                transform: translate(50%, 150px)
                            rotate(0turn)
                            translate(-50%, -150px) 
                            translate(50%, 50%)
                            rotate(1turn)
                            translate(-50%, -50%); /*前三个第一轮旋转,后三个第二轮旋转*/
            }
            to{
                transform: translate(50%, 150px)
                            rotate(1turn)
                            translate(-50%, -150px)
                            translate(50%, 50%) 
                            rotate(0turn)
                            translate(-50%, -50%);
            }
        }
        .wrap{
            width: 300px;
            height: 300px;
            background: yellow;
            border-radius: 50%;
            overflow: hidden;
            padding: 20px; /*加大窗口的宽和高,利用背景从边框开始的原理,让运动图片与边框有一定的距离*/
        } 
        .avatar{            
            width: 30px;
            height: 30px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0px auto; /*运行元素居中*/
            display: block;   
            animation: spinc 5s linear infinite; 
        }
    </style>
</head>
<body>
    <div class="wrap"> 
        <img src="../img/cat.png" alt="" class="avatar" /> 
    </div>
</body>

说明:

1.一个img然后即要沿环型路径运动,本身又不能随着旋转,那么就需要两组位移和旋转

2.第一组位移 + 旋转,实现img元素沿环形路径运动

translate(50%, 150px)

rotate(0turn)

translate(-50%, -150px)

3.第二组位移 + 旋转,实现img元素本身定位不动

translate(50%, 50%)

rotate(1turn)

translate(-50%, -50%)

两个元素方案主单个元素方案效果图如下:

详解Css3新特性应用之过渡与动画

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 HTML / CSS
CSS3 滤镜 webkit-filter详细介绍及使用方法
Dec 27 HTML / CSS
基础的CSS3弹性盒Flexbox布局使用实例
Apr 08 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5的结构和语义(5):交互
Oct 17 HTML / CSS
一些常用的HTML5模式(pattern) 总结
Jul 14 HTML / CSS
图片上传插件ImgUploadJS:用HTML5 File API 实现截图粘贴上传、拖拽上传
Jan 20 HTML / CSS
HTML5 Canvas入门学习教程
Mar 17 HTML / CSS
CSS3样式linear-gradient的使用实例
Jan 16 #HTML / CSS
纯CSS3实现表单验证效果(非常不错)
Jan 18 #HTML / CSS
使用CSS实现阅读进度条
Feb 27 #HTML / CSS
利用css3 translate完美实现表头固定效果
Feb 28 #HTML / CSS
纯CSS3实现Material Design效果
Mar 09 #HTML / CSS
CSS3实现精美横向滚动菜单按钮
Apr 14 #HTML / CSS
真正了解CSS3背景下的@font face规则
May 04 #HTML / CSS
You might like
一个捕获函数输出的函数
2007/02/14 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php函数连续调用实例分析
2015/07/30 PHP
iOS自定义提示弹出框实现类似UIAlertView的效果
2016/11/16 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
php微信扫码支付 php公众号支付
2019/03/24 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
在jQuery ajax中按钮button和submit的区别分析
2012/10/07 Javascript
document.execCommand()的用法小结
2014/01/08 Javascript
node.js中的fs.fchownSync方法使用说明
2014/12/16 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
Angular.js中数组操作的方法教程
2017/07/31 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
2018/07/24 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
2019/05/09 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[02:21]2018完美盛典章节片——初心
2018/12/17 DOTA
python subprocess 杀掉全部派生的子进程方法
2017/01/16 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python实现图片转字符小工具
2019/04/30 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
2014年大学班级工作总结
2014/11/14 职场文书
银行稽核岗位职责
2015/04/13 职场文书
毕业生求职自荐信(2016最新版)
2016/01/28 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android
python游戏开发之pygame实现接球小游戏
2022/04/22 Python