Animaciones y transiciones

Transitions

Pulser 1

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied

Pulser 2

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied

Pulser 3

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied

Animaciones

Small Solar system

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied
Planets loader

Target range inside

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied
sardinas bajo en sodio sardinas sin piel sardinas en agua sardinas al limon

Typewriter CSS

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied
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

	

		

			< >
			Input
		

		

			Bash
			
		

	

	

		
<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>

	

	
Copied
Example

Seguir leyendo

Últimos posts -->

¿Has visto estos proyectos?

Gymnasia

Gymnasia Gymnasia
Expo
React Native
TypeScript
OpenAI
Anthropic

App de fitness con dos agentes que se ejecutan íntegramente en el dispositivo, sin backend, de forma que los datos del usuario nunca salen del móvil. Un coach conversacional BYOK con tools locales y system prompt remoto con fallback offline, y un estimador de comidas que saca los macronutrientes de una foto del plato, con lectura de códigos de barras contra OpenFoodFacts.

Ver proyecto

arrow svg

Ver código

arrow svg

LangGraph Deep Researcher

LangGraph Deep Researcher LangGraph Deep Researcher
Python
LangGraph
FastAPI
React
TypeScript
Docker

Sistema multiagente de investigación construido con LangGraph. Un supervisor descompone tu pregunta en temas y lanza subagentes de búsqueda en paralelo; cada uno comprime sus hallazgos antes de pasarlos a un agente redactor que escribe el informe final en markdown con sus fuentes. Streaming en vivo por WebSockets, modelo configurable por rol y claves de API propias que nunca se guardan en el servidor.

Ver proyecto

arrow svg

Ver código

arrow svg

Tau

Tau Tau
Python
LangChain

Sistema multiagente de tutoría para estudiantes de secundaria, con un agente por asignatura y material de curso elaborado y validado por un equipo de profesores. Llegó a usarse con alumnos reales en un colegio privado en España y en un instituto en Colombia.

Ver proyecto

arrow svg
Ver todos los proyectos -->
>_ Disponible para proyectos

¿Tienes un proyecto con IA?

Hablemos.

maximofn@gmail.com

Especialista en Machine Learning e Inteligencia Artificial. Desarrollo soluciones con IA generativa, agentes inteligentes y modelos personalizados.

Escríbeme LinkedIn

¿Quieres ver alguna charla?

Últimas charlas -->

¿Quieres mejorar con estos tips?

Ú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.

Flow edit

Flow edit Flow edit

Edita imágenes con este modelo de Flow. Basándose en SD3 o FLUX puedes editar cualquier imagen y generar nuevas

Ver proyecto

arrow svg

Ver código

arrow svg

FLUX.1-RealismLora

FLUX.1-RealismLora FLUX.1-RealismLora
Ver todos los contenedores -->
>_ Disponible para proyectos

¿Tienes un proyecto con IA?

Hablemos.

maximofn@gmail.com

Especialista en Machine Learning e Inteligencia Artificial. Desarrollo soluciones con IA generativa, agentes inteligentes y modelos personalizados.

Escríbeme LinkedIn

¿Quieres entrenar tu modelo con estos datasets?

short-jokes-dataset

HuggingFace

Dataset de chistes en inglés

Uso: Fine-tuning de modelos de generación de texto humorístico

231K filas 2 columnas 45 MB
Ver en HuggingFace →

opus100

HuggingFace

Dataset con traducciones de inglés a español

Uso: Entrenamiento de modelos de traducción inglés-español

1M filas 2 columnas 210 MB
Ver en HuggingFace →

netflix_titles

HuggingFace

Dataset con películas y series de Netflix

Uso: Análisis de catálogo de Netflix y sistemas de recomendación

8.8K filas 12 columnas 3.5 MB
Ver en HuggingFace →
Ver más datasets -->