HTML5权威指南笔记：23-过渡、动画和变换

最新推荐文章于 2020-11-25 19:09:22 发布

馋雪山丘

最新推荐文章于 2020-11-25 19:09:22 发布

阅读量304

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/u011069189/article/details/78384384

版权

HTML5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1 使用过渡

属性	说明	值
transition-delay	指定过渡开始之前的延迟时间	＜时间＞
transition-duration	指定过渡的持续时间	＜时间＞
transition-property	指定应用过渡的属性	＜字符串＞
transition-timing-function	指定过渡期间计算中间值的方式	见1.2
transition	在一条声明中指定所有过渡细节的简写属性	见下

transition简写属性的格式如下：

transition: <transition-property> <transition-duration> <transition-timing-function><transition-delay>

例子中所有的-webkit-为厂商前缀。

例子：

/*应用在鼠标移动到元素上时触发*/
:hover {
    color: white;/*变换的属性*/

    /*定义过渡*/
    -webkit-transition-delay: 100ms;
    -webkit-transition-property: background-color, color, padding, font-size, border;
    -webkit-transition-duration: 500ms;
}

1.1 创建反向过渡

在应用过渡后重新回到初始状态
例子：

/*在初始属性中添加过渡，使可以重回这个状态*/
#banana {
    border: medium solid black;/*初始属性*/

    /*定义过渡*/
    -webkit-transition-delay: 10ms;
    -webkit-transition-duration: 250ms;
}

#banana :hover {
    color: white;/*过渡后属性*/

    /*定义过渡*/
    -webkit-transition-delay: 100ms;
    -webkit-transition-property: background-color, color, padding, font-size, border;
    -webkit-transition-duration: 500ms;
}

1.2 选择中间值的计算方式

transition-timing-function属性的值：ease（默认）、linear、ease-in、ease-out、ease-in-out。
这些值值表示为四个点控制的三次贝塞尔曲线。如下图：这里写图片描述
例子：

-webkit-transition-timing-function: linear;

2 使用动画

属性	说明	值
animation-delay	设置动画开始前的延迟	＜时间＞
animation-direction	设置动画循环播放的时候是否反向播放	normal alternate
animation-duration	设置动画播放的持续时间	＜时间＞
animation-iteration-count	设置动画的播放次数	infinite ＜数值＞
animation-name	指定动画名称	none ＜字符串＞
animation-play-state	允许动画暂停和重新播放	running paused
animation-timing-function	指定如何计算中间动画值，关于这个值的细节参见1节	ease linear ease-in ease-out ease-in-out cubic-bezier
animation	简写属性	见下面

animation简写属性的格式如下：

animation: <animation-name> <animation-duration> <animation-timing-function><animation-delay> <animation-iteration-count>

例子：

/*定义了动画的样式*/
#banana:hover {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
/*keyframes定义应用动画的属性*/
@-webkit-keyframes GrowShrink {
    to {
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: white;
        padding: 4px;
    }
}

2.1 使用关键帧

例子：设置初始状态

@-webkit-keyframes GrowShrink {
    /*使用from子句指定一组初始值*/
    from {
        font-size: xx-small;
        background-color: red;
    }

    to {
        font-size: x-large;
        border: medium solid white;
        background-color: green;
        color: white;
        padding: 4px;
    }
}

例子：指定中间关键帧

@-webkit-keyframes GrowShrink {
    from {
        padding: 1px;
    }
    /*在动画到百分之50和75处添加中间的关键帧，是样式改变*/
    50% {
        padding: 2px;
    }

    75% {
        padding: 3px;
    }

    to {
        padding: 4px;
    }
}

2.2 设置重复方向

animation-direction属性的值：
normal：每次重复都向前播放，如果可重复播放多次，每次动画都恢复初始状态，从头开始播放。
alternate：动画先向前播放，然后反方向播放，相当于animation-iteration-count属性的值为2。

例子：

animation-direction: alternate;

2.3 理解结束状态

动画结束后会回到初始状态，如果想一直停留在结束状态，那么可以使用过渡。

2.4 初始布局时应用动画

就是直接不使用鼠标的什么事件比如:hover，这样就会在页面加载后自动开始动画。

例子：

/*定义了动画的样式*/
#banana {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
/*定义应用动画的属性*/
@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

2.5 重用关键帧

例子：

/*两个样式#banana、#apple同用一个动画*/
#banana {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}
#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}

@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

2.6 为多个元素应用多个动画

例子：为多个元素应用一个动画

/*用,号使多个元素应用同一个动画*/
#banana,#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -webkit-animation-name: 'GrowShrink';
}

@-webkit-keyframes GrowShrink {
    to {
        padding: 4px;
    }
}

例子：为一个元素应用多个关键帧

#banana,#apple {
    -webkit-animation-delay: 100ms;
    -webkit-animation-duration: 500ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    /*用,号使同一个元素应用多个动画*/
    -webkit-animation-name: 'GrowShrink1','GrowShrink2';
}

@-webkit-keyframes GrowShrink1 {
    to {
        padding: 4px;
    }
}
@-webkit-keyframes GrowShrink2 {
    to {
        padding: 2px;
    }
}

2.7 停止和启动动画

animation-play-state属性可以用来停止和启动动画。如果这个属性的值为paused, 动画就会停止。如果换成playing , 动画就会开始播放。
例子：使用js控制动画

<!DOCTYPE HTML>
<html>
<head>
    <style>
        #fruittext {
            padding: 5px;
            border: medium double black;
            background-color: lightgrey;
            font-family: sans-serif;
        }

        #banana {
            -webkit-animation-duration: 2500ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: linear;
            -webkit-animation-name: 'GrowShrink';
        }

        @-webkit-keyframes GrowShrink {
            from {
                font-size: large;
                border: medium solid black;
            }

            to {
                font-size: x-large;
                border: medium solid white;
                background-color: green;
                color: white;
                padding: 4px;
            }
        }
    </style>
</head>
<body>
    <p id="fruittext">
        There are lots of different kinds of fruit - there are over 500
        varieties of <span id="banana">banana</span> alone. By the time we add the
        countless types of apples, oranges, and other
        well-known fruit, we are faced with thousands of choices.
    </p>
    <p>
        <button>Running</button>
        <button>Paused</button>
    </p>
    <script>
        var buttons = document.getElementsByTagName("BUTTON");
        for (var i = 0; i < buttons.length; i++) {
            buttons[i].onclick = function (e) {
                document.getElementById("banana").style.webkitAnimationPlayState =
                    e.target.innerHTML;
            };
        }
    </script>
</body>
</html>

3 使用变换

属性	说明	值
transform	指定应用的变换功能	见3.1
transform-origin	指定变换的起点	见3.2

3.1 应用变换

transform属性的值：

值	说明
translate(<长度值或百分数值＞） translateX(<长度值或百分数值＞） translateY(< 长度值或百分数值＞）	在水平方向、垂直方向或者两个方向上平移元素
scale(<数值＞） scaleX(<数值＞） scaleY(<数值＞）	在水平方向、垂直方向或者两个方向上缩放元素
rotate(<角度＞）	旋转元素
skew(< 角度） skewX(<角度＞） skewY(<角度＞）	在水平方向、垂直方向或者两个方向上使元素倾斜一定的角度
matrix(4~6个数值，逗号隔开）	指定自定义变换。大多数浏览器还没有实现z轴缩放，因此最后两个数字可以忽略（有些情况必须要省略）

例子：

-moz-transform: rotate(-45deg) scaleX(1.2);

3.2 指定元素变换的起点

transform-origin属性的值：

值	说明
<%>	指定元素x轴或者y轴的起点
＜长度值＞	指定距离
left center Right	指定x轴上的位置
top center bottom	指定y轴上的位置

例子：

/*要定义起点， 需要为x轴和沛h各定义一个值。如果只提供一个值，另一个值会被认为是中心位置。*/
-moz-transform-origin: right top;

3.3 将变换作为动画和过渡处理

例子：

/*经过1.5秒钟完成一次360° 旋转变换*/
#banana:hover {
    -moz-transition-duration: 1.5s;
    -moz-transform: rotate(360deg);
}

馋雪山丘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5权威指南笔记：23-过渡、动画和变换

1 使用过渡属性说明值 transition-delay 指定过渡开始之前的延迟时间＜时间＞ transition-duration 指定过渡的持续时间＜时间＞ transition-property 指定应用过渡的属性＜字符串＞ transition-timing-function 指定过渡期间计算中间值的方式见1.2 t
复制链接

扫一扫