Ejemplos animaciones

<div class="container">
            <h1>Animación ejemplos</h1>
            <div id="caja1">
            </div>
            <div id="caja2">
            </div>
            <div id="caja3">
            </div>
            
            <input type="button" id="anima1" value="Animación 1 (jquery)">
            <input type="button" id="anima3" value="Animación 3 (jquery+CSS3)">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>
#caja1,#caja2,#caja3{
    background-color: red;
    height:150px;
    width:150px;
    margin:10px;
}

@keyframes example {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:200px; top:0px;}
    50%  {background-color:blue; left:200px; top:200px;}
    75%  {background-color:green; left:0px; top:200px;}
    100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
#caja2, .animacion {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
$(function () {
    $("#anima1").click(function () {

        $("#caja1").animate({
            left: '250px',
            opacity: '0.5',
            height: '200px',
            width: '200px'
        });
    });
    $('#anima3').click(function () {
        $("#caja3").addClass("animacion");
    })
});

jquery introducción

<div class="container">
            <h1>Página con jquery</h1>
            <p class="parrafo">Hola</p>
            <p class="parrafo">que</p>
            <p class="parrafo">tal</p>
            <div id="contenido">
                <h3>Contenido muy interesante</h3>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
                <p>Bla bla blabla bláblala</p>
            </div>
            <input type="button" id="boton" value="Pinchamé">
        </div>
        <script src="js/codigo.js" type="text/javascript"></script>
$(function () {
    $("h1").after("<p>La página se ha cargado</p>");
    $(".parrafo").after("@@@");
    $('#boton').click(function () {
        $('#contenido').toggle();
    });
    $("#contenido p").on({
        mouseenter: function () {
            $(this).css("background-color", "lightgray");
        },
        mouseleave: function () {
            $(this).css("background-color", "lightblue");
        },
        click: function () {
            $(this).css("background-color", "yellow");
        }
    });

});