CSS Keyframe Naming Issue

// Left navigation
.training-tabs-nav {
flex: 0 0 250px;
border-right: 1px solid var(–color-grey-light, #e5e5e5);
padding-right: 2rem;

.training-tabs-list {
list-style: none;
margin: 0;
padding: 0;
}

.training-tabs-item {
margin-bottom: 1rem;

a {
display: block;
padding: 1rem 1.25rem;
color: var(–color-text, #333);
text-decoration: none;
border-radius: 6px;
transition: all 0.3s ease;
border: 1px solid transparent;
font-weight: 500;
font-size: 1rem;
line-height: 1.4;

&:hover {
background: var(–color-grey-lightest, #f8f9fa);
border-color: var(–color-grey-light, #e5e5e5);
}
}

&.active {
a {
background: var(–color-primary-light, #f0f7ff);
color: $color-primary;
border-color: $color-primary;

&:hover {
background: var(–color-primary-light, #f0f7ff);
}
}
}
}
}

// Content area
.training-tabs-content {
flex: 1;
min-width: 0; // Prevent flex item from overflowing

.training-tabs-panel {
display: none;

&.active {
display: block;
animation: fadeIn 0.3s ease-in-out;
}
}

.training-tabs-teaser {
margin-bottom: 2rem;
font-size: 1.1em;
line-height: 1.6;
color: var(–color-text, #333);
}

.training-tabs-extended {
display: none;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(–color-grey-light, #e5e5e5);
color: var(–color-text, #333);
line-height: 1.6;
}
}

// Responsive styles
@media (max-width: 768px) {
flex-direction: column;
padding: 1.5rem;

.training-tabs-nav {
flex: none;
border-right: none;
border-bottom: 1px solid var(–color-grey-light, #e5e5e5);
padding-right: 0;
padding-bottom: 1.5rem;
margin-bottom: 1.5rem;

.training-tabs-list {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.training-tabs-item {
margin-bottom: 0;

a {
padding: 0.75rem 1rem;
font-size: 0.95rem;
}
}
}
}
}

@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
│ 119:12 ✖ Expected keyframe name "fadeIn" to be
│ │ keyframes-name-pattern
│ │ kebab-case
│ │ 124:5 ✖ Expected empty line before rule

1. **Keyframe Name Pattern**: The keyframe name `fadeIn` should be in kebab-case (lowercase with hyphens). You can rename it to `fade-in`.

2. **Empty Line Before Rule**: Stylelint expects an empty line before certain rules for better readability. You should add an empty line before the `@keyframes` declaration.

Here’s the corrected CSS with those changes:

.training-tabs-widget {
    display: flex;
    gap: 2rem;
    margin: 2rem 0;
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px #000;

    // Left navigation
    .training-tabs-nav {
        flex: 0 0 250px;
        border-right: 1px solid var(--color-grey-light, #e5e5e5);
        padding-right: 2rem;

        .training-tabs-list {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .training-tabs-item {
            margin-bottom: 1rem;

            a {
                display: block;
                padding: 1rem 1.25rem;
                color: var(--color-text, #333);
                text-decoration: none;
                border-radius: 6px;
                transition: all 0.3s ease;
                border: 1px solid transparent;
                font-weight: 500;
                font-size: 1rem;
                line-height: 1.4;

                &:hover {
                    background: var(--color-grey-lightest, #f8f9fa);
                    border-color: var(--color-grey-light, #e5e5e5);
                }
            }

            &.active {
                a {
                    background: var(--color-primary-light, #f0f7ff);
                    color: $color-primary;
                    border-color: $color-primary;

                    &:hover {
                        background: var(--color-primary-light, #f0f7ff);
                    }
                }
            }
        }
    }

    // Content area
    .training-tabs-content {
        flex: 1;
        min-width: 0; // Prevent flex item from overflowing

        .training-tabs-panel {
            display: none;
            
            &.active {
                display: block;
                animation: fade-in 0.3s ease-in-out;
            }
        }

        .training-tabs-teaser {
            margin-bottom: 2rem;
            font-size: 1.1em;
            line-height: 1.6;
            color: var(--color-text, #333);
        }

        .training-tabs-extended {
            display: none;
            margin-top: 2rem;
            padding-top: 2rem;
            border-top: 1px solid var(--color-grey-light, #e5e5e5);
            color: var(--color-text, #333);
            line-height: 1.6;
        }
    }

    // Responsive styles
    @media (max-width: 768px) {
        flex-direction: column;
        padding: 1.5rem;

        .training-tabs-nav {
            flex: none;
            border-right: none;
            border-bottom: 1px solid var(--color-grey-light, #e5e5e5);
            padding-right: 0;
            padding-bottom: 1.5rem;
            margin-bottom: 1.5rem;

            .training-tabs-list {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
            }

            .training-tabs-item {
                margin-bottom: 0;
                
                a {
                    padding: 0.75rem 1rem;
                    font-size: 0.95rem;
                }
            }
        }
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

With these changes:
– The keyframe name has been updated to `fade-in`.
– An empty line has been added before the `@keyframes` rule.

This should resolve the linting errors you're facing.