Animaciones y transiciones

Transitions

Pulser 1

	
		<div class="pulser1"></div>
 
<style>
    .pulser1 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
    }
    .pulser1:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
</style>

Pulser 2

	
		<div class="pulser2"></div>
 
<style>
    .pulser2 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
        transition: 1s;
    }
    .pulser2:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
</style>

Pulser 3

	
		<div class="pulser3"></div>
 
<style>
    .pulser3 {
        width: 30px;
        height: 30px;
        background-color: #09f;
        border-radius: 50%;
        position: relative;
    }
    .pulser3:hover {
        scale: 2;
        background: purple;
        box-shadow: 0 0 10px purple;
    }
    .pulser3 {
        transition: 1s;
    }
    .pulser3 {
        transition-property: background-color, scale;
    }
</style>

Animaciones

Small Solar system

	
		<svg width="220" height="220" viewBox="0 0 220 220">
  <title xml:lang="en">Planets loader</title>
  <circle id="orbit1" cx="50%" cy="50%" r="55px" fill="none" stroke="#f8f3dc" /> 
  <circle id="orbit2" cx="50%" cy="50%" r="75px" fill="none" stroke="#f8f3dc" /> 
  <circle id="orbit3" cx="50%" cy="50%" r="95px" fill="none" stroke="#f8f3dc" /> 
  <circle id="sun" cx="50%" cy="50%" r="28px" fill="#fecb2f" /> 
  <circle id="mars" cx="50%" cy="50%" r="8px" fill="#69b3b2" /> 
  <circle id="mercury" cx="50%" cy="50%" r="8px" fill="#fa3757" /> 
  <circle id="saturn" cx="50%" cy="50%" r="8px" fill="#ffa4a4" /> 
</svg>
 
<style>
    @keyframes rotation {
        from {
                transform: rotate(0deg)
                        translate(var(--translate))
                        rotate(0deg);
            }
            to {
                transform: rotate(360deg)
                        translate(var(--translate)) 
                        rotate(-360deg);
            }
        }
        #mercury {
            --translate: -55px;
            animation: rotation 4s linear infinite;
        }
        #mars {
            --translate: -75px;
            animation: rotation 5s -1s linear infinite;
        }
        #saturn {
            --translate: -95px;
            animation: rotation 8s -3s linear infinite;
        }
</style>

Target range inside

	
		<section class="porto">
    <div class="content-container flex-wrapper">
        <div class="vertical-scroll-container">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto1.svg" alt="sardinas bajo en sodio">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto2.svg" alt="sardinas sin piel">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto3.svg" alt="sardinas en agua">
        <img onerror="this.parentNode.removeChild(this)" src="https://marianabeldi.github.io/scroll-driven-sardinas/img/porto4.svg" alt="sardinas al limon">
        </div>
    </div>
</section>
 
<style>
    .porto {
        color: #f5dbc8;
        padding: 32px;
        text-align: center;
    }
    .porto p {
        font-size: 1.1rem;
        font-weight: 500;
        letter-spacing: 0.03em;
        max-width: 40ch;
    }
    .flex-wrapper {
        align-items: center;
        display: flex;
        justify-content: center;
        gap: 2rem;
    }
    .content-container {
        margin-inline: auto;
        width: 90vw;
    }
    .vertical-scroll-container {
        align-items: center;
        display: flex;
        flex-direction: column;
        /* flex: 1 1 50%; */
        gap: 6rem 0;
        min-width: 400px;
        overflow-y: scroll;
        scrollbar-color: #3848a0 #1b2767;
        scroll-snap-type: y mandatory;  
        padding: 200px 20px;
        height: 100px;
    }
    .vertical-scroll-container img {
        scroll-snap-align: center;
        width: 400px;
        animation: slideInOut;
        animation-timeline: view();
    }
    @keyframes slideInOut {
        from {
            transform: scale(.8) translateY(100px); 
            opacity: 0;
        }
        to { 
            transform: scale(1) translateY(0); 
            opacity: 1;
        }
        0% {
            transform: scale(1) translateY(0); 
            opacity: 1;    
        }
        100% { 
            transform: scale(.8) translateY(-100px); 
            opacity: 0 
        }
    }
    @media screen and (max-width: 40em) {
        .vertical-scroll-container img {
            padding: 0;
            width: 300px;
        }
    }
</style>

Typewriter CSS

	
		<div class="animation-contanier">
    <div class="wrapper">
        <div class="static-text">for your</div>
        <ul class="dynamic-text">
            <li><span>Slack Channels</span></li>
            <li><span>GitHub Repositories</span></li>
            <li><span>Jira Boards</span></li>
            <li><span>Trello Boards</span></li>
            <li><span>GitLab Repositories</span></li>
            <li><span>Google Drives</span></li>
            <li><span>One Drives</span></li>
            <li><span>Slack Groups </span></li>
            <li><span>Google Events</span></li>
            <li><span>Microsoft Events</span></li>
            <li><span>Keeper Folder</span></li>
        </ul>
    </div>
</div>
 
<style>
    .wrapper {
        display: inline-flex
    }
    .wrapper .static-text {
        font-size: 2.7rem;
        color: #fff;
        font-weight: 400;
    }
    .wrapper .dynamic-text{
        top: -4px;
        margin-left: 15px;
        height: 85px;
        line-height: 1.5;
        position: relative;
        overflow: hidden;
    }
    .dynamic-text li{
        color: yellow;
        background-color: #1e263f;
        list-style: none;
        font-size: 2.7rem;
        font-size: 60px;
        position: relative;
        animation: slide 22s steps(11) infinite;
        top: 0;
    }
    @keyframes slide {
        100% {
            top: -990px;
        }
    }
    .dynamic-text li span{
        position: relative;
    }
    .dynamic-text li span::after{
        content: "";
        position: absolute;
        height: 100%;
        width: 100%;
        border-left: 2px solid #fff;
        background-color: #1e263f;
        padding: 5px;
        left: 0;
        animation: typing 2s steps(17) infinite;
    }
    @keyframes typing {
        60%, 100% {
            left: 100%;
            margin: 0 -40px 0 40px;
        }
    }
</style>

for your

Slack Channels
GitHub Repositories
Jira Boards
Trello Boards
GitLab Repositories
Google Drives
One Drives
Slack Groups
Google Events
Microsoft Events
Keeper Folder

Rotate Down Right

	
		<div class="animated rotateInDownRight">Example</div>
 
<style>
    @keyframes rotateInDownRight {
        from {
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: rotate3d(0, 0, 1, 45deg);
            transform: rotate3d(0, 0, 1, 45deg);
            opacity: 0;
        }
        to {
            -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        animation: rotateInDownRight 1s linear infinite;
    }
</style>

Example

Seguir leyendo

MCP Durability: Servidor y Cliente con Persistencia para Tareas de Larga Duración

Aprende a crear un servidor y cliente MCP con durabilidad para tareas de larga duración. Tutorial completo sobre Model Context Protocol con persistencia de datos usando SQLite, gestión de tareas en background y monitoreo en tiempo real. Implementa migración de datos, procesamiento por lotes y entrenamiento de modelos ML que sobreviven a reinicios del servidor. Código Python con FastMCP, recursos, herramientas y patrones de durabilidad para aplicaciones enterprise.

MCP Resumable: Cómo Crear Servidores y Clientes con Checkpoints Automáticos

Aprende a crear servidores y clientes MCP con capacidades de reanudación automática. Tutorial completo sobre implementación de checkpoints, manejo de interrupciones y recuperación de tareas largas en Model Control Protocol. Incluye código práctico con FastMCP, gestión de estado persistente y ejemplos de uso real para procesos que pueden interrumpirse y continuar desde donde se quedaron.

Stream información en MCP: Guía Completa para Actualizaciones de Progreso en Tiempo Real con FastMCP

Aprende cómo implementar streaming en tiempo real en aplicaciones MCP (Model Context Protocol) usando FastMCP. Esta guía completa te muestra cómo crear servidores y clientes MCP que soportan actualizaciones de progreso e información streaming para tareas de larga duración. Construirás herramientas habilitadas para streaming que proporcionan retroalimentación en tiempo real durante el procesamiento de datos, subida de archivos, tareas de monitoreo y otras operaciones que requieren mucho tiempo. Descubre cómo usar StreamableHttpTransport, implementar manejadores de progreso con Context y crear barras de progreso visuales que mejoran la experiencia del usuario al trabajar con aplicaciones MCP que requieren retroalimentación continua.

Últimos posts -->

¿Has visto estos proyectos?

Horeca chatbot

Naviground

Subtify

Ver todos los proyectos -->

¿Quieres aplicar la IA en tu proyecto? Contactame!

¿Quieres mejorar con estos tips?

Memory profiler

Ver el uso de memoria de un script

DataLoader con pin_memory y num_workers

Aumentar el rendimiento de DataLoader con pin_memory y num_workers

py-smi

Librería de Python para obtener datos de la GPU igual que `nvidia-smi`

Últimos tips -->

Usa esto en local

Los espacios de Hugging Face nos permite ejecutar modelos con demos muy sencillas, pero ¿qué pasa si la demo se rompe? O si el usuario la elimina? Por ello he creado contenedores docker con algunos espacios interesantes, para poder usarlos de manera local, pase lo que pase. De hecho, es posible que si pinchas en alún botón de ver proyecto te lleve a un espacio que no funciona.