CSS 动画功能

【CSS3中的动画功能】

/* 1.Transition功能,通过指定开始结束状态来过度,无法实现复杂动画。*/
/* transition:property duration timing-function */
transition-property: background-color;
transition-duration: 3s;
transition-timing-function: linear;

transition: background-color 3s linear; /*简洁的写法*/

transition: background-color 1s linear,color 1s linear,width 1s linear; /* 同时执行多个动画效果 */

/* 2.Animations功能,可以指定帧,实现复杂的动画。 */
@-webkit-keyframes mycolor
{
    0% /*开始帧*/
    {
        background-color:red;
    }
    40% /*背景颜色变化帧 - 黄色*/
    {
        background-color:#ffff00;
    }
    70% /*背景颜色变化帧 - 蓝色*/
    {
        background-color:aqua;
    }
    100%  /*结束帧*/
    {
        background-color:red;
    }
}
div:hover
{
    -webkit-animation:mycolor 5s linear;
}

/* 实现多个属性值同时改变的动画 */
@-webkit-keyframes mycolor
{
    0%
    {
        background-color:Red;
        transform:rotate(0deg);
    }
    30%
    {
        background-color:aqua;
        transform:rotate(30deg);
    }
    60%
    {
        background-color:lightskyblue;
        transform:rotate(-30deg);
    }
    100%
    {
        background-color:Red;
        transform:rotate(0deg);
    }
}
div:hover
{
    -webkit-animation-name:mycolor;
    -webkit-animation-duration:5s;
    -webkit-animation-timing-function:linear;
}

/*参数含义*//*
linear:匀速
ease-in:又慢到快
ease-out:由快到慢
ease:先慢再快再慢
ease-in-out:先慢再快再慢*/

时间: 2024-11-06 12:53:50

CSS 动画功能的相关文章

css实现动画功能

在CSS中动画功能其实可以说是很强大的,在网页中加载速度很快,他的功能特效可以一千变万化,做不到只有想不到的,当然前提是你要掌握在CSS3上面的各种标签,今天带来了我在课程练习中的动画的3D动态旋转.代码如下:    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 1.Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能.transition属性的用法如下: transition:property duration timing-function; 其中,property表示对哪个属性平滑过渡,取值可以是“background-color”.“color”.“width

Mobile Web 前端开发 CSS动画经验分享

谈到动画作用.CSS动画是Mobilweb开发的利器,CSS动画不得不谈.受限于Mobil设备功能等疑问,PC上的动画完结计划在Mobil上大都行不通,幸运的Mobil上我能够用CSS动画,今日我就来了解一下CSS动画的3个首要成员. CSS改换(Transit transit默许的突变动画.当CSS特点改动的时分,界说好需求改换的CSS特点.transit动画被触发.可是并不是一切的CSS特点改动都会触发translat当前,并没有一个官方的文档列出来那些能够,那些不能够,可是能够经过一些小窍

css3动画功能介绍

一:过渡动画---Transitions 含义:在css3中,Transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能. Transitions属性的使用方法如下所示: transition: property | duration  | timing-function | delay transition-property: 表示对那个属性进行平滑过渡. transition-duration: 表示在多长时间内完成属性值的平滑过渡. tra

八、CSS3中的动画功能

CSS3中的动画功能分为Transitions功能和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果,下面我们就来介绍下这两种功能. 1.Transitions功能 1.1 Transitions功能的使用方法 CSS3中,Transitions功能通过将元素的某个属性从一个属性值在指定时间内平滑过渡到另一个属性值来实现动画功能,使用方法如下: transition:属性名 过渡时间间隔 过渡方法 延迟时间,第一个属性值表示对哪个属性进行平滑过渡,第二个属性表示在

Web高性能动画及渲染原理(1)CSS动画和JS动画

目录 一. CSS动画 和 JS动画 1.1 CSS动画 1.2 JS动画 1.3 小结 二. 使用Velocity.js实现动画 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. CSS动画 和 JS动画 Web动画的本质是元素状态改变造成的样式变更,CSS动画和JS动画的区别并不是由语言来决定的,而是由两者的特点和适用场景来判断的.CSS动画简洁高效,

Css3之高级-7 Css动画(概述、关键帧、动画属性)

一.动画概述 动画概念 - 过渡属性只能模拟动画效果 - animation 属性可以制作类似 Flash 动画 - 通过关键帧控制动画的每一步 - 使元素从一种样式逐渐变化为另一种样式 - 实现复杂的动画效果 - 浏览器兼容性 - 最新版本支持良好 - Chrome 和 Safari 需要前缀 -webkit- - FireFox 需要前缀 -moz- - Opera 需要前缀 -o- 动画示例 - 声明动画 - 创建一个已命名的动画 - 使用 @keyframes 声明动画的关键帧 - 为元

css动画-animation各个属性详解(转)

CSS3的animation很容易就能实现各种酷炫的动画,虽然看到别人的成果图会觉得很难,但是如果掌握好各种动画属性,做好酷炫吊炸天的动画都不在话下,好,切入正题. 一.动画属性: 动画属性包括:①animation-name,②animation-duration,③animation-timing-function, 以下是各属性详解: 1.animation-name:指定要绑定到选择器的关键帧的名称. 2.animation-duration:定义动画完成一个周期需要多少秒或毫秒 3.a

Animate.css让添加CSS动画像喝水一样容易

animate.css是一堆很酷的,有趣的,跨浏览器的动画效果库,你可以随意在你的项目中使用.用在你想要突出的任何地方,如主页,滑块,这像喝水一样容易,迷死人了. 用法 在您的网站上使用animate.css,只要简单地把样式表插入到文档中的<HEAD>中,并为需要动画的元素添加一个CSS类名即可,以及动画的名称.就是这样!你就有了一个CSS动画效果.超强! <head>   <link rel="stylesheet" href="animat