前端css3动画部分有疑问希望友友们帮助解惑

对于这样一段代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 animation-timing-function属性title>
    <style type="text/css">
        @-webkit-keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            text-align:center;
            line-height:50px;
            border-radius:0;
            background-color:#14C7F3;
            -webkit-animation-name:mytransform;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
        div+div
        {
            margin-top:10px;
        }
        #div1{-webkit-animation-timing-function:linear;}
        #div2{-webkit-animation-timing-function:ease;}
        #div3{-webkit-animation-timing-function:ease-in;}
        #div4{-webkit-animation-timing-function:ease-out;}
        #div5{-webkit-animation-timing-function:ease-in-out}
    style>
head>
<body>
    <div id="div1">lineardiv>
    <div id="div2">easediv>
    <div id="div3">ease-indiv>
    <div id="div4">ease-outdiv>
    <div id="div5">ease-in-outdiv>
body>
html>

我想请问一下：
问题1：代码中的这一部分：div+div
{
margin-top:10px;} div+div的意思是一个盒子和另一个盒子之间margin-top部分是10px的距离吗？。/这一段代码的意思是否和在设置第一个div中加入属性margin-top:10px;是一样的效果呐？/
问题2：在这一段代码中webkit是什么意思啊，它在这里的作用是什么？/百度了一下说是公开源代码的搜索器引擎，但我不知道放在这里的含义是什么，有什么作用/
问题3：对于代码div中的:-webkit-animation-name:mytransform;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear; 这一部分，他是写在div中，为什么不写在这里面？

div+div
加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥有相同的父元素，所选到的仅为一个B元素标签。

2.-webkit-xxx是兼容写法，针对浏览器内核的。CSS3去兼容不同的浏览器，主要是针对浏览器旧的版本，新浏览器基本不需要。

https://www.cnblogs.com/lsm-boke/p/14384358.html

3.因为这三个属性样式可能所有div都有。写在div里方便简洁。你要是写在 div1 ....divn岂不是又多，还累。要是改一个属性你得改那么多地方

你百度啊
直接百度
:-webkit
animation的使用