CSS3学习中，记录中.....

时间 2019-11-18
标签 css3 css 学习记录栏目 CSS 繁體版
原文原文链接
1. 动画效果html
从代码中看各个属性吧！【原谅我用的是火狐浏览器】web
<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:mymove 5s infinite;
    /* 
        这里 -moz-animation全都整到一个了，没有单列出来
        语法：animation: name duration timing-function delay iteration-count direction;
     */
    -moz-animation:mymove 5s infinite; /* Firefox */
    /* 其实这有好多呢！
        animation-name   须要绑定到选择器的 keyframe 名称（不解释）
        animation-duration  完成动画所花费的时间，以秒或毫秒计（不解释）
        animation-timing-function  规定动画的速度曲线。    【如下为属性值】
                linear  动画从头至尾的速度是相同的。
                ease    默认。动画以低速开始，而后加快，在结束前变慢。
                ease-in   动画以低速开始
                ease-out   动画以低速结束
                ease-in-out  动画以低速开始和结束
        animation-delay   规定在动画开始以前的延迟，以秒或毫秒计。默认值是 0 可为负（负值，动画跳过 2 秒进入动画周期）
        animation-iteration-count    规定动画播放的次数 
                1.实际的数字
                2.infinite 无限次播放
        animation-direction    是否应该轮流反向播放动画
                normal    默认值。动画应该正常播放。
                alternate   动画应该轮流反向播放。
        这里还有俩属性
        animation-play-state   规定动画正在运行仍是暂停
                paused    动画暂停
                running   动画正在播放
         animation-fill-mode  规定动画在播放以前或以后，其动画效果是否可见（这个属性没明白）
               none 不改变默认行为。
               forwards  当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
               backwards 在 animation-delay 所指定的一段时间内，在动画显示以前，应用开始属性值（在第一个关键帧中定义）
               both 向前和向后填充模式都被应用。
    */
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
    -o-animation:mymove 5s infinite; /* Opera */
}
/* 目前浏览器都不支持 @keyframes 规则。*/
@keyframes mymove
{
    from {top:0px;}
    to {top:200px;}
}

@-moz-keyframes mymove /* Firefox */
{
from {top:0px;}
to {top:200px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}

@-o-keyframes mymove /* Opera */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>

<p><b>注释：</b>本例在 Internet Explorer 中无效。</p>

<div></div>

</body>
</html>
整理了CSS3的动画感受很很差记！
浏览器